Vue3的响应式核心原理笔记

Vue2和Vue3响应式对比#

• Vue2响应式基于Object.defineProperty原理实现（观察者模式和发布/订阅模式）

  当创建Vue实例时,vue会遍历data选项的属性

  • 数据劫持：通过Object.defineProperty为属性添加getter和setter对数据的读取进行劫持
  • 依赖收集：通过getter进行依赖收集
  • 派发更新：通过setter进行派发更新

  每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

  

但是基于Object.defineProperty特性无法检测未在data中声明的属性变化，并作出相应的更新

对象和数组都可以采用$set的方式添加响应式的property

• Vue3响应式原理是基于ES6的Proxy来实现

  1. 当一个值被读取时进行追踪：proxy 的 get 处理函数中 track 函数记录了该 property 和当前副作用。
  2. 当某个值改变时进行检测：在 proxy 上调用 set 处理函数。
  3. 重新运行代码来读取原始值：trigger 函数查找哪些副作用依赖于该 property 并执行它们。

未完待续~~