-
响应式简单理解:当一个对象的属性发生变化的时候调用一个回调函数
-
要想做到上述功能需要具备两个条件
- 属性的写入和读取必须可以被拦截(被vue管理)
- 属性必须在回调函数或watch函数中被读取,这样才能记录属性之后被写入的时候应该调用哪个函数
-
回调函数有三种,如下
- 渲染函数,即模板代码,模板代码会被编译成渲染函数。这也是为什么吗属性变化会渲染页面的原因
- 监听器:实际上是我们传递给监听器的回调函数。
- 计算属性:同监听器
-
响应实现
- 实现条件一
- data中的属性,在组件初始化的时候实现条件一
- Vue.set 方法
- vue3中的ref,reactive
- 实现条件二
- 三种函数会在组件初始化时被调用
- 三种函数在属性变化时会在此被调用
- 实现条件一
-
一些常见的响应式失效问题
- 动态的为对象添加属性
- 不满足条件1
- Vue.set方法添加的属性页面上没有效果
- 不满足条件2,虽然被vue管理了,但是没有被回调函数访问过
- vue3 watch失效
let a=reactive({b:0})watch(a.b)
- 不满足条件1,虽然a响应式的,a.b返回了0,0并没有被vue管理
- 不满足条件2,虽然a响应式的,a.b并没有在watch的函数中被调用。
改为如下可以
为什么作为函数返回值就可以?因为作为函数,会被延后调用,延后到watch函数调用的时候才调用。let a=reactive({b:0})watch(()=>a.b)
- 动态的为对象添加属性
-
vue3的effectScope
- 在vue3中三种函数都会创建一个scope(域)来管理回调函数,scope和回调函数是一对多的关系。scope可以被停止,即移除条件二。
- 可以认为 watch,compute和渲染函数是一个单函数的effectScope
- scope中的回调函数会被一次一起执行完,所以把多个watch,compute和渲染函数放在一个域中,会提升效率