vue3 响应式的实现原理

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 6 天，点击查看活动详情

核心设计思想

除了组件化，Vue.js 另一个核心设计思想就是响应式。它的本质是当数据变化后会自动执行某个函数，映射到组件的实现就是，当数据变化后，会自动触发组件的重新渲染。响应式是 Vue.js 组件化更新渲染的一个核心机制。

Vue.js 2.x 响应式

我们先来回顾一下 Vue.js 2.x 响应式实现的部分： 它在内部通过 Object.defineProperty API 劫持数据的变化，在数据被访问的时候收集依赖，然后在数据被修改的时候通知依赖更新。

在 Vue.js 2.x 中，Watcher 就是依赖，有专门针对组件渲染的 render watcher。这里有两个流程，首先是依赖收集流程，组件在 render 的时候会访问模板中的数据，触发 getter 把 render watcher 作为依赖收集，并和数据建立联系；然后是派发通知流程，当我对这些数据修改的时候，会触发 setter，通知 render watcher 更新，进而触发了组件的重新渲染。

Object.defineProperty API 的一些缺点：

不能监听对象属性新增和删除；
初始化阶段递归执行 Object.defineProperty 带来的性能负担。
复制代码

在 Vue.js 2.x 中，data 中定义的数据，Vue.js 内部在组件初始化的过程中会把它变成响应式，这是一个相对黑盒的过程，用户通常不会感知到。

Vue.js 3.x 响应式

Vue.js 3.0 为了解决 Object.defineProperty 的这些缺陷，使用 Proxy API 重写了响应式部分，并独立维护和发布整个 reactivity 库。

也就是在 Vue.js 3.0 中，是用 reactive 这个有魔力的函数，把数据变成了响应式。

reactive 内部通过 createReactiveObject 函数把 target 变成了一个响应式对象，这个函数主要做了以下几件事情：

1、函数首先判断 target 是不是数组或者对象类型，如果不是则直接返回。所以**原始数据 target 必须是对象或者数组**。
2、如果对一个已经是响应式的对象再次执行 reactive，还应该返回这个响应式对象。
3、如果对同一个原始数据多次执行 reactive ，那么会返回相同的响应式对象。
4、使用 canObserve 函数对 target 对象做一进步限制。
5、通过 Proxy API 劫持 target 对象，把它变成响应式。
6、给原始数据打个标识。
复制代码

响应式的实现方式无非就是劫持数据，Vue.js 3.0 的 reactive API 就是通过 Proxy 劫持数据，而且由于 Proxy 劫持的是整个对象，所以我们可以检测到任何对对象的修改，弥补了 Object.defineProperty API 的不足。

依赖收集：get 函数

依赖收集发生在数据访问的阶段

get 函数主要做了四件事情：

1、对特殊的 key 做了代理
2、通过 Reflect.get 方法求值
3、执行 track 函数收集依赖（最核心）
4、对计算的值 res 进行判断，如果它也是数组或对象，则递归执行 reactive 把 res 变成响应式对象。
复制代码

Object.defineProperty 是在初始化阶段，即定义劫持对象的时候就已经递归执行了，而 Proxy 是在对象属性被访问的时候才递归执行下一步 reactive，这其实是一种延时定义子对象响应式的实现，在性能上会有较大的提升

收集的依赖就是数据变化后执行的副作用函数。

每次 track ，就是把当前激活的副作用函数 activeEffect 作为依赖，然后收集到 target 相关的 depsMap 对应 key 下的依赖集合 dep 中。

派发通知：set 函数

派发通知发生在数据更新的阶段

set 函数主要就做两件事情：

1、通过 Reflect.set 求值
2、通过 trigger 函数派发通知（最核心），并依据 key 是否存在于 target 上来确定通知类型，即新增还是修改。
复制代码

trigger 函数主要做了四件事情：

1、通过 targetMap 拿到 target 对应的依赖集合 depsMap；
2、创建运行的 effects 集合；
3、根据 key 从 depsMap 中找到对应的 effect 添加到 effects 集合；
4、遍历 effects 执行相关的副作用函数。
复制代码

每次 trigger 函数就是根据 target 和 key ，从 targetMap 中找到相关的所有副作用函数遍历执行一遍。

依赖收集和派发通知的过程中都提到副作用函数，依赖收集过程中我们把 activeEffect（当前激活副作用函数）作为依赖收集。

总结

其实 Vue.js 3.0 在响应式的实现思路和 Vue.js 2.x 差别并不大，主要就是 劫持数据的方式改成用 Proxy 实现 ， 以及收集的依赖由 watcher 实例变成了组件副作用渲染函数 。

源码参考

由于源码太多，本文就不展示，可直接去： github.com/vuejs/core

packages/reactivity/src/baseHandlers.ts
packages/reactivity/src/effect.ts
packages/reactivity/src/reactive.ts
packages/reactivity/src/baseHandlers.ts
packages/reactivity/src/ref.ts
复制代码