Vue学习之响应式基础

声明式响应状态

在组合式API中,推荐使用ref()函数来声明响应式状态:

Import{ref} from 'vue'

ref() 接收参数,并将其包裹在一个带有 .value 属性的 ref 对象中返回:

Const count=ref(0)
Console.log(count)//{value:0}
Console.log(count.value) //0

为什么要使用 ref?​

你可能会好奇:为什么我们需要使用带有 .value 的 ref,而不是普通的变量?为了解释这一点,我们需要简单地讨论一下 Vue 的响应式系统是如何工作的。

当你在模板中使用了一个 ref,然后改变了这个 ref 的值时,Vue 会自动检测到这个变化,并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时,Vue 会追踪在渲染过程中使用的每一个 ref。然后,当一个 ref 被修改时,它会触发追踪它的组件的一次重新渲染。

在标准的 JavaScript 中,检测普通变量的访问或修改是行不通的。然而,我们可以通过 getter 和 setter 方法来拦截对象属性的 get 和 set 操作。

该 .value 属性给予了 Vue 一个机会来检测 ref 何时被访问或修改。在其内部,Vue 在它的 getter 中执行追踪,在它的 setter 中执行触发。从概念上讲,你可以将 ref 看作是一个像这样的对象:
js

// 伪代码,不是真正的实现const myRef = {  _value: 0, get value() {   track()    return this._value  }, set value(newValue) { this._value = newValue   trigger()  }}

另一个 ref 的好处是,与普通变量不同,你可以将 ref 传递给函数,同时保留对最新值和响应式连接的访问。当将复杂的逻辑重构为可重用的代码时,这将非常有用。
该响应性系统在深入响应式原理章节中有更详细的讨论。

深层响应性​

Ref 可以持有任何类型的值,包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构,比如 Map。
Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时,变化也会被检测到:
js

import { ref } from 'vue'
const obj = ref({  nested: { count: 0 },  arr: ['foo', 'bar']})
function mutateDeeply() {  // 以下都会按照期望工作 obj.value.nested.count++ obj.value.arr.push('baz')}

非原始值将通过 reactive() 转换为响应式代理,该函数将在后面讨论。
也可以通过 shallow ref 来放弃深层响应性。对于浅层 ref,只有 .value 的访问会被追踪。浅层 ref 可以用于避免对大型数据的响应性开销来优化性能、或者有外部库管理其内部状态的情况。

• 减少大型不可变数据的响应性开销
• 与外部状态系统集成

DOM 更新时机​

当你修改了响应式状态时,DOM 会被自动更新。但是需要注意的是,DOM 更新不是同步的。Vue 会在“next tick”更新周期中缓冲所有状态的修改,以确保不管你进行了多少次状态修改,每个组件都只会被更新一次。
要等待 DOM 更新完成后再执行额外的代码,可以使用 nextTick() 全局 API:
js

import { nextTick } from 'vue'async 
function increment() { count.value++ await nextTick()  // 现在 DOM 已经更新了}
reactive()

还有另一种声明响应式状态的方式,即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同,reactive() 将使对象本身具有响应性:
js

import { reactive } from 'vue'
const state = reactive({ count: 0 })
参考:为 reactive() 标注类型 

在模板中使用:
template

<button @click="state.count++">  {{ state.count }}</button>

响应式对象是 JavaScript 代理,其行为就和普通对象一样。不同的是,Vue 能够拦截对响应式对象所有属性的访问和修改,以便进行依赖追踪和触发更新。
reactive() 将深层地转换对象:当访问嵌套对象时,它们也会被 reactive() 包装。当 ref 的值是一个对象时,ref() 也会在内部调用它。与浅层 ref 类似,这里也有一个 shallowReactive() API 可以选择退出深层响应性。

Reactive Proxy vs. Original​

值得注意的是,reactive() 返回的是一个原始对象的 Proxy,它和原始对象是不相等的:
js

const raw = {}
const proxy = reactive(raw)// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

只有代理对象是响应式的,更改原始对象不会触发更新。因此,使用 Vue 的响应式系统的最佳实践是 仅使用你声明对象的代理版本。
为保证访问代理的一致性,对同一个原始对象调用 reactive() 会总是返回同样的代理对象,而对一个已存在的代理对象调用 reactive() 会返回其本身:
js

// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true
// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true

这个规则对嵌套对象也适用。依靠深层响应性,响应式对象内的嵌套对象依然是代理:
js

const proxy = reactive({})const raw = {}
proxy.nested = raw
console.log(proxy.nested === raw) // false
reactive() 的局限性​
reactive() API 有一些局限性:
  1. 有限的值类型:它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。
  2. 不能替换整个对象:由于 Vue 的响应式跟踪是通过属性访问实现的,因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象,因为这样的话与第一个引用的响应性连接将丢失:
    js
    let state = reactive({ count: 0 })// 上面的 ({ count: 0 }) 引用将不再被追踪// (响应性连接已丢失!)state = reactive({ count: 1 })
  3. 对解构操作不友好:当我们将响应式对象的原始类型属性解构为本地变量时,或者将该属性传递给函数时,我们将丢失响应性连接:
    js
const state = reactive({ count: 0 })// 当解构时,count 已经与 state.count 断开连接
let { count } = state// 不会影响原始的 
statecount++// 该函数接收到的是一个普通的数字并且无法追踪的变化
state.count // 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)

由于这些限制,我们建议使用 ref() 作为声明响应式状态的主要 API。

额外的 ref 解包细节​

作为 reactive 对象的属性​
一个 ref 会在作为响应式对象的属性被访问或修改时自动解包。换句话说,它的行为就像一个普通的属性:
js

const count = ref(0)
const state = reactive({  count})
console.log(state.count) // 0
state.count = 1
console.log(count.value) // 1

如果将一个新的 ref 赋值给一个关联了已有 ref 的属性,那么它会替换掉旧的 ref:
js

const otherCount = ref(2)
state.count = otherCount
console.log(state.count) // 2
// 原始 ref 现在已经和 state.count 失去联系
console.log(count.value) // 1

只有当嵌套在一个深层响应式对象内时,才会发生 ref 解包。当其作为浅层响应式对象的属性被访问时不会解包。
数组和集合的注意事项​
与 reactive 对象不同的是,当 ref 作为响应式数组或原生集合类型(如 Map) 中的元素被访问时,它不会被解包:
js

const books = reactive([ref('Vue 3 Guide')])// 这里需要 .value
console.log(books[0].value)
const map = reactive(new Map([['count', ref(0)]]))// 这里需要 .value
console.log(map.get('count').value)

在模板中解包的注意事项​

在模板渲染上下文中,只有顶级的 ref 属性才会被解包。
在下面的例子中,count 和 object 是顶级属性,但 object.id 不是:
js

const count = ref(0)const object = { id: ref(1) }
//因此,这个表达式按预期工作:
template
{{ count + 1 }}
...但这个不会:
template
{{ object.id + 1 }}

渲染的结果将是 [object Object]1,因为在计算表达式时 object.id 没有被解包,仍然是一个 ref 对象。为了解决这个问题,我们可以将 id 解构为一个顶级属性:
js

const { id } = object
<template>
{{ id + 1 }}
</template>

现在渲染的结果将是 2。
另一个需要注意的点是,如果 ref 是文本插值的最终计算值 (即 {{ }} 标签),那么它将被解包,因此以下内容将渲染为 1:

<template>
{{ object.id }}
</template>

该特性仅仅是文本插值的一个便利特性,等价于 {{ object.id.value }}

来自 https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html

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

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

相关文章

【2024.02.22】定时执行专家 V7.0 发布 - TimingExecutor V7.0 Release - 龙年春节重大更新版本

目录 ▉ 新版本 V7.0 下载地址 ▉ V7.0 新功能 ▼2024-02-21 V7.0 - 更新日志▼ ▉ V7.0 新UI设计 ▉ 新版本 V7.0 下载地址 BoomWorks软件的最新版本-CSDN博客文章浏览阅读10w次&#xff0c;点赞9次&#xff0c;收藏41次。▉定时执行专家—毫秒精度、专业级的定时任务执行…

Jenkins2.426邮件通知配置

之前安装的jenkins出现问题了&#xff0c;重新装了jenkins&#xff0c;需要重新配置&#xff1a;Maven&#xff0c;JDK&#xff0c;Allure报告&#xff0c;邮件通知&#xff0c;Extended E-mail Notification等 配置Maven&#xff0c;JDK参考&#xff1a;CICD集合(四):Jenkins…

vue中使用wangEditor富文本编辑器

jsd-2306-vue-01: 教学项目教学项目教学项目教学项目教学项目 2306-vue-baking-teacher: 教学项目教学项目教学项目教学项目 一、脚手架工程中使用富文本编辑器wangEditor 1.通过以下命令 安装wangEditor npm i wangeditor -S 2.在main.js文件中添加以下配置信息 //引入wa…

快别回消息了哥,快手测试开发工程师三面

大家好&#xff0c;我是chowley&#xff0c;进回顾一下之前参加的技术面试 部门&#xff1a;商业化 时间&#xff1a;50min 平台&#xff1a;轻雀&#xff0c;这平台纯nt&#xff0c;用Mac面试&#xff0c;麦克风老连我iPhone 过程 自我介绍实习经历一实习经历二有用到覆盖…

PYthon:super与类的继承

两种继承方式&#xff1a; Class SubClass(FartherClass)&#xff1a;子类可以任意调用父类的成员变量、成员函数&#xff0c;适合单继承&#xff0c;即只继承一个父类。 Super&#xff1a;适合多继承 统一用一种&#xff0c;不要交叉用。 class FooParent(object): def _…

多数pythoneer只知有列表list却不知道python也有array数组

数组和列表 Python中数组和列表是不同的&#xff0c;我敢断言大多数的pythoneer只知道有列表list&#xff0c;却不知道python也有array数组。列表是一个包含不同数据类型的元素集合&#xff0c;而数组是一个只能含相同数据类型的元素集合。 Python的array库是一个提供数组操作…

第七篇【传奇开心果系列】python的文本和语音相互转换库技术点案例示例:Sphinx自动电话系统(IVR)经典案例

传奇开心果博文系列 系列博文目录python的文本和语音相互转换库技术点案例示例系列 博文目录前言一、雏形示例代码二、扩展思路介绍三、Sphinx多语言支持示例代码四、Sphinx和语音合成库集成示例代码五、Sphinx语音识别前自然语言预处理示例代码六、Sphinx语音识别自动电话系统…

echarts 实现x轴文字过长时折行展示

代码如下&#xff1a; this.options {color: ["#0075FF", "#00E2C4", "#FCA884", "#FFCB11"],grid: {top: "25%",bottom: "6%",right: "8%",left: "8%",containLabel: true,},legend: {top…

vscode怎么运行C++的cpp文件

非常简单&#xff0c;点击vscode导航栏的Extensions, 搜索C/C Compile Run安装上即可&#xff0c; 写好 C/C 程序之后&#xff0c;直接使用 F6 一键编译运行就能出结果。

Nestjs框架: 多环境参数配置

多环境配置方案比较&#xff1a;dotenv vs config 1 &#xff09;dotenv库 npmjs.com/package/dotenv应用广泛&#xff0c;前后端, 解析.env文件&#xff0c;挂载到 process.env 属性上去安装&#xff1a;$ npm i -S dotenv按照官方示例配置在.env文件上配置&#xff0c;对嵌套…

robots.txt 文件规则

robots.txt 是一种用于网站根目录的文本文件&#xff0c;其主要目的在于指示网络爬虫&#xff08;web crawlers&#xff09;和其他网页机器人&#xff08;bots&#xff09;哪些页面可以抓取&#xff0c;以及哪些页面不应该被抓取。可以看作是网站和搜索引擎机器人之间的一个协议…

[C++] 异常处理机制及使用案例

什么是C异常处理? C 异常处理是一种机制&#xff0c;用于在程序运行过程中处理可能发生的错误或异常情况。当发生异常时&#xff0c;程序会跳出当前的执行流程&#xff0c;并查找能够处理该异常的代码块&#xff0c;执行相应的处理逻辑&#xff0c;从而避免程序崩溃或产生未定…

实验室预约|实验室预约小程序|基于微信小程序的实验室预约管理系统设计与实现(源码+数据库+文档)

实验室预约小程序目录 目录 基于微信小程序的实验室预约管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、微信小程序前台 2、管理员后台 &#xff08;1&#xff09;管理员登录 &#xff08;2&#xff09;实验室管理 &#xff08;3&#xff09;公告信息…

【数据分享】2014-2024年全国监测站点的逐年空气质量数据(15个指标\免费获取)

空气质量的好坏反映了空气的污染程度&#xff0c;在各项涉及城市环境的研究中&#xff0c;空气质量都是一个十分重要的指标。空气质量是依据空气中污染物浓度的高低来判断的。 我们发现学者王晓磊在自己的主页里面分享了2014年5月以来的全国范围的到站点的逐时空气质量数据&am…

PBM模型学习

本专栏着重讲解PBM学习所得&#xff0c;学习笔记、心得&#xff0c;并附有视频素材资料&#xff0c;视频详细目录如下&#xff1a; PBM相关参数解释1 PBM相关参数解释2 PBM相关案例实践1 PBM相关案例实践2 PBM相关案例实践2 PBM相关案例实践3 PBM多相流中次相界面设置1 PBM多相…

Spring Boot整合Redis实现订单超时处理

1.首先&#xff0c;我们需要在pom.xml文件中添加以下依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency>2.在application.properties文件…

ERC404 + meme 文化叙事,Dancing Beans 会达到怎样的高度?

在十年以前&#xff0c;一个叫做《wow&#xff01;you can really dance》的鬼畜舞蹈视频&#xff0c;在互联网上刮起了一股 meme 浪潮&#xff0c;很多玩家将视频中跳舞的男主角的跳舞片段二次加工&#xff0c;进一步鬼畜化、做成表情包&#xff0c;并在各个社交平台疯传。与此…

35、商城系统(十六):购物车模块,离线购物车,ThreadLocal,拦截器,线程池CompletableFuture异步执行

目录 一、创建购物车模块 1.新增购物车域名 2.静态文件复制到nginx 3.创建购物车模块

SpringMVC 学习(二)之第一个 SpringMVC 案例

目录 1 通过 Maven 创建一个 JavaWeb 工程 2 配置 web.xml 文件 3 创建 SpringMVC 配置文件 spring-mvc.xml 4 创建控制器 HelloController 5 创建视图 index.jsp 和 success.jsp 6 运行过程 7 参考文档 1 通过 Maven 创建一个 JavaWeb 工程 可以参考以下博文&#x…

Linux命令之ls命令

ls命令 ls命令的作用是列出目录下的内容&#xff0c;语法如下&#xff1a; ls [ -a -l -h ] [ Linux路径 ] 1、 -a -l -h 是可选的选项。 2、Linux路径是此命令可选的参数。 当不使用选项和参数&#xff0c;直接使用 ls 命令本体&#xff0c;表示&#xff1a;以平…