Vue3的响应式核心原理笔记

Vue2和Vue3响应式对比

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

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

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

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

    image-20220422152526659

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

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

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

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

未完待续~~

posted @ 2022-04-22 17:21  Bradleyu  阅读(60)  评论(0)  编辑  收藏  举报