浅谈vue响应式

1. 响应式简单理解：当一个对象的属性发生变化的时候调用一个回调函数

2. 要想做到上述功能需要具备两个条件

   • 属性的写入和读取必须可以被拦截（被vue管理）
   • 属性必须在回调函数或watch函数中被读取，这样才能记录属性之后被写入的时候应该调用哪个函数

3. 回调函数有三种，如下

   • 渲染函数，即模板代码，模板代码会被编译成渲染函数。这也是为什么吗属性变化会渲染页面的原因
   • 监听器：实际上是我们传递给监听器的回调函数。
   • 计算属性：同监听器

4. 响应实现

   • 实现条件一
     • data中的属性，在组件初始化的时候实现条件一
     • Vue.set 方法
     • vue3中的ref，reactive
   • 实现条件二
     • 三种函数会在组件初始化时被调用
     • 三种函数在属性变化时会在此被调用

5. 一些常见的响应式失效问题

   • 动态的为对象添加属性
     • 不满足条件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的函数中被调用。
       改为如下可以

         let a=reactive({b:0})
         watch(()=>a.b)
     

     为什么作为函数返回值就可以？因为作为函数，会被延后调用，延后到watch函数调用的时候才调用。

6. vue3的effectScope

   • 在vue3中三种函数都会创建一个scope（域）来管理回调函数，scope和回调函数是一对多的关系。scope可以被停止，即移除条件二。
   • 可以认为 watch，compute和渲染函数是一个单函数的effectScope
   • scope中的回调函数会被一次一起执行完，所以把多个watch，compute和渲染函数放在一个域中，会提升效率