浅谈vue响应式

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

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

• 属性的写入和读取必须可以被拦截（被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的函数中被调用。
    改为如下可以

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

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

vue3的effectScope

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