vue3-响应式基础之ref

声明响应式状态

ref()

在组合式 API 中,推荐使用 ref() 函数来声明响应式状态: ref() 接收参数,并将其包裹在一个带有 .value 属性的 ref 对象中返回:

import { ref } from 'vue'
const count = ref(0)console.log(count) // { value: 0 }
console.log(count.value) // 0count.value++
console.log(count.value) // 1

形式1 setup() 函数

  1. 要在组件模板中访问 ref,请从组件的 setup() 函数中声明并返回它们:

<script lang="ts" >
import { ref } from 'vue'export default {setup() {const count = ref(0)function increment() {// 在 JavaScript 中需要 .valuecount.value++}// 不要忘记同时暴露 increment 函数return {count,increment}}
}
</script><template><div class="container"><div>{{ count }}</div><button @click="count++">{{ count }}</button></div>
</template><style  scoped>
.container {}
</style>
  1. 注意,在模板中使用 ref 时,我们不需要附加 .value。为了方便起见,当在模板中使用时,ref 会自动解包 (有一些注意事项)。

在模板渲染上下文中,只有顶级的 ref 属性才会被解包。

在下面的例子中,count 和 object 是顶级属性,但 object.id 不是:

const count = ref(0)
const object = { id: ref(1) }//模版正常渲染执行
{{ count + 1 }} //模版不会正常渲染非顶级不会被解包仍然是一个ref
{{ object.id + 1 }}  对象//我们可以将 id 解构为一个顶级属性
const { id } = object
{{ id + 1 }}   //模版正常渲染并执行//模版自动解包
{{ object.id }}
该特性仅仅是文本插值的一个便利特性,等价于 {{ object.id.value }}

形式2 <script setup>

  • 在 setup() 函数中手动暴露大量的状态和方法非常繁琐。

  • 幸运的是,我们可以通过使用单文件组件 (SFC) 来避免这种情况。我们可以使用 <script setup> 来大幅度地简化代码:

<script setup lang="ts">
import { ref } from 'vue'const count = ref(0)function increment() {count.value++
}
</script><template><button @click="increment">{{ count }}</button>
</template>

深层响应性

  • Ref 可以持有任何类型的值,包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构,比如 Map。

  • Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时,变化也会被检测到:

<script setup lang="ts">
import { ref } from 'vue'const count = ref(0)
const obj = ref({nested: { count: 0 },arr: ['foo', 'bar']
})function mutateDeeply() {// 以下都会按照期望工作obj.value.nested.count++obj.value.arr.push('baz')
}function increment() {count.value++
}
</script><template>{{ obj.arr }}<button @click="mutateDeeply">{{ obj.nested.count + 1 }}</button>
</template>

shallow ref

可以通过 shallow ref 来放弃深层响应性

  1. 减少大型不可变数据的响应性开销

  2. 与外部状态系统集成

DOM 更新时机

  • 当你修改了响应式状态时,DOM 会被自动更新。但是需要注意的是,DOM 更新不是同步的。

  • Vue 会在“next tick”更新周期中缓冲所有状态的修改,以确保不管你进行了多少次状态修改,每个组件都只会被更新一次。

要等待 DOM 更新完成后再执行额外的代码,可以使用 nextTick() 全局 API:

<script setup lang="ts">
import { ref } from 'vue'
import { nextTick } from 'vue'const count = ref(0)async function increment() {count.value++console.log(document.querySelector('button')?.textContent);// 这里会立即打印 '0'await nextTick()// 现在 DOM 已经更新了console.log(document.querySelector('button')?.textContent);// 这里会立即打印 '1'
}
</script><template><button @click="increment">{{ count }}</button>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/623851.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CAN工具 - ValueCAN3 - 基础介绍

关注菲益科公众号—>对话窗口发送 “CANoe ”或“INCA”&#xff0c;即可获得canoe入门到精通电子书和INCA软件安装包&#xff08;不带授权码&#xff09;下载地址。 CAN/CANFD通讯广泛存在于整个车载网络中&#xff0c;几乎每一块软硬件的开发都需要用到CAN工具&#xff0c…

Mask R-CNN网络中RPN区域建议网络的作用是什么?

问题描述&#xff1a;Mask R-CNN网络中RPN区域建议网络的作用是什么&#xff1f; 问题解答&#xff1a; 在 Mask R-CNN&#xff08;Mask Region-based Convolutional Neural Network&#xff09;中&#xff0c;RPN&#xff08;Region Proposal Network&#xff09;是用于生成…

机器学习 | 多层感知机MLP

机器学习 | 多层感知机MLP 1. 实验目的 自行构造一个多层感知机&#xff0c;完成对某种类型的样本数据的分类&#xff08;如图像、文本等&#xff09;&#xff0c;也可以对人工自行构造的二维平面超过3类数据点&#xff08;或者其它标准数据集&#xff09;进行分类。 2. 实验…

Hadoop 3.2.4 集群搭建详细图文教程

一、集群简介 Hadoop 集群包括两个集群&#xff1a;HDFS 集群、YARN 集群。两个集群逻辑上分离、通常物理上在一起&#xff1b;两个集群都是标准的主从架构集群。逻辑上分离 两个集群互相之间没有依赖、互不影响 物理上在一起 某些角色进程往往部署在同一台物理服务器上 MapR…

KY56 数制转换

进制转换板子 ti #include<bits/stdc.h>using namespace std;string ss "0123456789ABCDEF"; int a, b; string s;int main() {cin>>a>>s>>b;string str "";int len s.length();for(int i 0; i < len; ){int k 0;for(int…

Open3D (C++) 计算条件数

目录 一、算法原理1、条件数2、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。 一、算法原理 1、条件数 条件数法是目前应用最为广泛的一种病态诊断方法。条件数的定义为:

LeeCode前端算法基础100题(18)整数转罗马数字

一、问题详情: 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M。 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并列的 1…

K邻近和KNN

K邻近 K邻近是一种分类算法&#xff0c;其思路是计算离该类别最近的K条数据的类别&#xff0c;来标记该数据的类别 !别 KNN&#xff1a; • KNN算法主要是用于解决监督学习中的分类问题 • 其数据集是由特征值和目标值组成&#xff0c;使用的数据是已经标记过的数据 • KNN…

基于RNN的模型

文本数据是一种典型的具有序列结构的数据&#xff0c;因为文本通常是由一系列的词语或字符组成的序列。每个词语或字符在文本中都有特定的位置和顺序&#xff0c;这种有序的结构对于理解和处理文本的含义至关重要。因此&#xff0c;多数情况下需要使用时间序列建模来完成相应的…

HX711压力传感器学习一(STM32)

目录 原理图&#xff1a;​ 引脚介绍&#xff1a; HX711介绍工作原理: 程序讲解&#xff1a; 整套工程&#xff1a; 发送的代码工程&#xff0c;与博客的不一致&#xff0c;如果编译有报错请按照报错和博客进行修改 原理图&#xff1a; 引脚介绍&#xff1a; VCC和GND引…

计算机体系结构基础复习

1. 计算机系统可划分为哪几个层次,各层次之间的界面是什么? 你认为这样划分层次的意义何在? 答&#xff1a; 计算机系统可划分为四个层次&#xff0c;分别是&#xff1a;应用程序、 操作系统、 硬件系统、 晶体管四个大的层次。 注意把这四个层次联系起来的三个界面。各层次…

gateway Redisson接口级别限流解决方案

文章目录 前言1. 计数器算法&#xff08;固定窗口限流器&#xff09;2. 滑动窗口日志限流器3. 漏桶算法&#xff08;Leaky Bucket&#xff09;4. 令牌桶算法&#xff08;Token Bucket&#xff09;5. 限流队列应用场景实现工具 一、Redisson简介二、Redisson限流器的原理三、Red…

Reflect

Reflect Reflect拥有Object对象的一些内部方法&#xff0c;某些方法会同时在Object对象和Reflect对象上部署&#xff0c;也就是说Object对象上存在的方法&#xff0c;通过Reflect也可以访问到。 单论Reflect的话&#xff0c;可以这么理解&#xff0c;Reflect就是继承了Object的…

【python、nlp】文本预处理

文本预处理及其作用&#xff1a; 文本语料在输送给模型前一般需要一系列的预处理工作&#xff0c;才能符合模型输入的要求&#xff0c;如&#xff1a;将文本转化成模型需要的张量&#xff0c;规范张量的尺寸等&#xff0c;而且科学的文本预处理环节还将有效指导模型超参数的选…

富文本使用总结

多种富文本 一、Tinymce富文本 踩坑&#xff1a;disabled和readonly效果问题 解决方法&#xff1a; 【Tinymce富文本】如何实现disabled和readonly效果_tinymce disabled-CSDN博客 二、vue-quill-editor富文本 官方链接&#xff1a; vue-quill-editor Quill官方中文文档…

【Leetcode】232. 用栈实现队列

【Leetcode】232. 用栈实现队列 题目链接代码 题目链接 【Leetcode】232. 用栈实现队列 代码 type MyQueue struct {A []intB []int }func Constructor() MyQueue {return MyQueue{} }func (this *MyQueue) Push(x int) {this.A append(this.A, x) }func (this *MyQueue…

面向对象三大特征之三:多态--java学习笔记

什么是多态 多态是在继承/实现情况下的一种现象&#xff0c;表现为&#xff1a;对象多态、行为多态 对象多态&#xff1a;举个栗子&#xff0c;比如一个人&#xff0c;他可以是一个老师&#xff0c;也可以是一个歌手&#xff0c;也可以是一个丈夫...... 行为多态&#xff1a;举…

Chrome 插件匹配模式(Match patterns)规则

匹配模式&#xff08;Match patterns&#xff09; 一、匹配模式结构 匹配模式是采用以下结构的网址&#xff0c;用于指定一组网址&#xff1a; <scheme>://<host>/<path>1. scheme 必须是以下内容之一&#xff0c;并使用双斜线 (//) 与格式的其余部分分隔…

PHP反序列化总结4--原生类总结

原生类的简要介绍以及原生类和反序列化的关系 PHP 原生类指的是 PHP 内置的类&#xff0c;它们可以直接在 PHP 代码中使用且无需安装或导入任何库&#xff0c;相当于代码中的内置方法例如echo &#xff0c;print等等可以直接调用&#xff0c;但是原生类就是可以就直接php中直接…

git手册

问题场景​ 不同git remote之间代码同步 git checkout remote1 branch git checkout remote2 branch git merge remote1 branch git push 已经在git索引记录&#xff0c;现在不想要在git管理 提交git删除提交.gitignore修改本地新增该文件 本地仓库重置为与远程分支一致 …