前言
本文使用 ref 对 vue 的响应性进行解读，仅仅是响应性原理解析，不涉及 vue 组件等概念。
vue 的响应性的实现，在 @vue/reactivity 包下，对应的源码目录为 packages/reactivity。如何调试 vue 源码，可查看该文章
为什么使用 ref 进行讲解，而不是 reactive？
ref 比 reactive 的实现简单，且不需要用到 es6 的 Proxy，仅仅需要使用到对象的 getter 和 setter 函数
因此，讲述响应性原理，我们用简单的 ref ，尽量减少大家的理解成本
什么是响应性？
这部分的响应性定义，来自 vue3 官方文档
这个术语在程序设计中经常被提及，但这是什么意思呢？响应性是一种允许我们以声明式的方式去适应变化的编程范例。人们通常展示的典型例子，是一份 excel 电子表格 (一个非常好的例子)。
如果将数字 2 放在第一个单元格中，将数字 3 放在第二个单元格中并要求提供 SUM，则电子表格会将其计算出来给你。不要惊奇，同时，如果你更新第一个数字，SUM 也会自动更新。
JavaScript 通常不是这样工作的——如果我们想用 JavaScript 编写类似的内容：
let val1 = 2 let val2 = 3 let sum = val1 + val2 console.log(sum) // 5 val1 = 3 console.log(sum) // 仍然是 5
如果我们更新第一个值，sum 不会被修改。
那么我们如何用 JavaScript 实现这一点呢？
我们这里直接看 @vue/reactive 的测试用例，来看看怎么使用，才会做到响应性的效果
ref 的测试用例
it 包裹的是测试用例的具体内容，我们只需要关注回调里面的代码即可。
it('should be reactive', () => { const a = ref(1) let dummy let calls = 0 effect(() => { calls++ dummy = a.value }) expect(calls).toBe(1) expect(dummy).toBe(1) a.value = 2 expect(calls).toBe(2) expect(dummy).toBe(2) // same value should not trigger a.value = 2 expect(calls).toBe(2) expect(dummy).toBe(2) })
我们从测试用例中，可以看出有以下几点结论：
- 被 effect 包裹的函数，会自动执行一次。
- 被 effect 函数包裹的函数体，拥有了响应性 —— 当 effect 内的函数中的 ref 对象 a.value 被修改时，该函数会自动重新执行。
- 当 a.value 被设置成同一个值时，函数并不会自动的重新执行。
effect 是什么？
官方文档中的描述：Vue 通过一个副作用 (effect) 来跟踪函数。副作用是一个函数的包裹器，在函数被调用之前就启动跟踪。Vue 知道哪个副作用在何时运行，并能在需要时再次执行它。
简单地说，要使一个函数拥有响应性，就应该将它包裹在（传入）effect 函数里。
那么这里也可以稍微猜一下，如果有这么一个 updateDom 函数：
const a_ref = ref('aaaa') function updateDom(){ return document.body.innerText = a_ref.value } effect(updateDom) setTimeout(()=>{ a_ref.value = 'bbb' },1000)
只要用 effect 包裹一下，当 a_ref.value 改变，就会自动设置 document.body.innerText，从而更新界面。
（当然这里也只是猜一下，实际上基本的原理，也与这个差不多，但会复杂很多。由于本文篇幅优先，并没有涉及到这部分）
依赖收集和触发更新
要实现响应性，就需要在合适的时机，再次执行副作用 effect。如何确定这个合适的时机？就需要依赖收集（英文术语：track）和触发更新（英文术语：trigger）
仍然看这个测试用例的例子
it('should be reactive', () => { const a = ref(1) let dummy let calls = 0 effect(() => { calls++ dummy = a.value }) expect(calls).toBe(1) expect(dummy).toBe(1) a.value = 2 expect(calls).toBe(2) expect(dummy).toBe(2) // same value should not trigger a.value = 2 expect(calls).toBe(2) expect(dummy).toBe(2) })
我们已经知道，effect 包裹的函数，要在合适的时机被再次执行，那么在这个例子中，合适的时机就是，a.value 这个 ref 对象被修改。
由于副作用函数，使用了 a.value，因此副作用函数，依赖 a 这个 ref 变量。我们应该把这个依赖记录下来。
假如是自己实现，可以这么写：
const a = { // 当 a 被访问时，可以将副作用函数存储在 a 对象的 dependency 属性中，实际上 @vue/reactivity 会稍微复杂一点 get value(){ const fn = // 假设有办法拿到 effect 的副作用函数 // fn 就是以下这个函数 // () => { // calls++ // dummy = a.value // }) a.dependence = fn } // 当 a.value 被修改时，可以这么触发更新 set value(){ this.dependence() } }
这样就可以做到，当 ref 被获取时，收集依赖（即将副作用函数保存起来）；当 ref 被修改时，触发更新（即调用副作用函数）
当然这个实现非常简单，实际上还要考虑很多情况，例如：
- 一个副作用函数，可能依赖多个 ref。如 computed，就可能依赖多个 ref，才能算出最终的值，因此依赖是一组的副作用函数。
- 不是任何时候都收集依赖。仅仅在 effect 包裹的时候，才收集依赖
- 一开始依赖 a 这个 ref 的，但后来不依赖了
- ……
这些情况都是我们没有考虑进去的，那么，接下来，我们就看看真正的 ref 的实现
概念约定
在讲解源码前，我们这里先对一些概念进行约定：
- 副作用对象：在接下来的源码解析中，特指 effect 函数内部创建的一个对象，类型为 ReactiveEffect（先记住有这么名字即可）。被收集依赖的实际对象。先介绍这么多，后面还会有详细介绍
- 副作用函数：在接下来的源码解析中，特指传入 effect 的函数，也是被触发再次执行的函数。
effect(() => { calls++ dummy = a.value })
- 响应式变量：ref、reactive、computed 等函数返回的变量。
- track：收集依赖
- trigger：触发更新
- 副作用对象依赖响应式变量。如：ReactiveEffect 依赖某个 ref
- 响应式变量，拥有多个依赖，依赖的值副作用对象。如： 某个 ref 拥有（收集到） n 个 ReactiveEffect 依赖
ref 源码解析
通过 ref 的实现，看依赖是什么，是怎么被收集的
ref 对象的实现
export function ref(value?: unknown) { return createRef(value) } // shallowRef，只是将 createRef 的第二个参数 shallow，标记为 true export function shallowRef(value?: unknown) { return createRef(value, true) } function createRef(rawValue: unknown, shallow = false) { // 如果已经是ref，则直接返回 if (isRef(rawValue)) { return rawValue } return new RefImpl(rawValue, shallow) }
ref 和 shallowRef， 本质都是 RefImpl 对象实例，只是 shallow 属性不同
为了便于理解，我们可以只关注 ref 的实现，即默认 shallow === false
接下来，我们看看 RefImpl 是什么
class RefImpl<T> { private _value: T private _rawValue: T // 用于存储依赖的副作用函数 public dep?: Dep = undefined public readonly __v_isRef = true constructor(value: T, public readonly _shallow = false) { // 保存原始 value 到 _rawValue this._rawValue = _shallow ? value : toRaw(value) // convert函数的作用是，如果 value 是对象，则使用 reactive(value) 处理，否则返回value // 因此，将一个对象传入 ref，实际上也是调用了 reactive this._value = _shallow ? value : convert(value) } get value() { // 收集依赖 trackRefValue(this) return this._value } set value(newVal) { newVal = this._shallow ? newVal : toRaw(newVal) // 如果值改变，才会触发依赖 if (hasChanged(newVal, this._rawValue)) { this._rawValue = newVal this._value = this._shallow ? newVal : convert(newVal) // 触发依赖 triggerRefValue(this, newVal) } } }
在 RefImpl 对象中
- getter 获取 value 属性时，trace 收集依赖
- setter 设置 value 属性时，trigger 触发依赖
因此，只有访问/修改 ref 的 value 属性，才会收集/触发依赖
依赖是怎么被收集的
export function trackRefValue(ref: RefBase<any>) { // 判断是否需要收集依赖 if (isTracking()) { ref = toRaw(ref) // 如果没有 dep 属性，则初始化 dep，dep 是一个 Set<ReactiveEffect>，存储副作用函数 if (!ref.dep) { ref.dep = createDep() } // 收集 effect 依赖 trackEffects(ref.dep) } } // 判断是否需要收集依赖 export function isTracking() { // shouldTrack 是一个全局变量，代表当前是否需要 track 收集依赖 // activeEffect 也是个全局变量，代表当前的副作用对象 ReactiveEffect return shouldTrack && activeEffect !== undefined }
为什么需要使用 isTracking，来判断是否收集依赖？
不是任何情况 ref 被访问时，都需要收集依赖。例如：
- 没有被 effect 包裹时，由于没有副作用函数（即没有依赖，activeEffect === undefined），不应该收集依赖
- 某些特殊情况，即使包裹在 effect，也不应该收集依赖（即 shouldTrack === false）。如：组件生命周期执行、组件 setup 执行
ref.dep 有什么作用？
ref.dep 的类型是Set<ReactiveEffect> ，关于 ReactiveEffect 的细节会在后面详细阐述
ref.dep 用于存储副作用对象，这些副作用对象，依赖该 ref，ref 被修改时就会触发
我们再来看看 trackEffects：
// 代表当前的副作用 effect let activeEffect: ReactiveEffect | undefined export function trackEffects( dep: Dep ) { // 这个是局部变量的 shouldTrack，跟上一部分的全局 shouldTrack 不一样 let shouldTrack = false // 已经 track 收集过依赖，就可以跳过了 shouldTrack = !dep.has(activeEffect!) if (shouldTrack) { // 收集依赖，将 effect 存储到 dep dep.add(activeEffect!) // 同时 effect 也记录一下 dep // 用于 trigger 触发 effect 后，删除 dep 里面对应的 effect，即 dep.delete(activeEffect) activeEffect!.deps.push(dep) } }
收集依赖，就是把 activeEffect（当前的副作用对象），保存到 ref.dep 中（当触发依赖时，遍历 ref.dep 执行 effect ）
然后把 ref.dep，也保存到 effect.deps 中（用于在触发依赖后， ref.dep.delete(effect)，双向删除依赖）
依赖是怎么被触发的
看完 track 收集依赖，那看看依赖是怎么被触发的
export function triggerRefValue(ref: RefBase<any>, newVal?: any) { // ref 可能是 reactive 对象的某个属性的值 // 这时候在 triggerRefValue(this, newVal) 时取 this，拿到的是一个 reactive 对象 // 需要获取 Proxy 代理背后的真实值 ref 对象 ref = toRaw(ref) // 有依赖才触发 effect if (ref.dep) { triggerEffects(ref.dep) } }
再来看看 triggerEffects
export function triggerEffects( dep: Dep | ReactiveEffect[] ) { // 循环遍历 dep，去取每个依赖的副作用对象 ReactiveEffect for (const effect of isArray(dep) ? dep : [...dep]) { // 默认不允许递归，即当前 effect 副作用函数，如果递归触发当前 effect，会被忽略 if (effect !== activeEffect || effect.allowRecurse) { // effect.scheduler可以先不管，ref 和 reactive 都没有 if (effect.scheduler) { effect.scheduler() } else { // 执行 effect 的副作用函数 effect.run() } } } }
这里省略了一些代码，这样结构更清晰。
当 ref 被修改时，会 trigger 触发依赖，即执行了 ref.dep 里的所有副作用函数（effect.run 运行副作用函数）
为什么默认不允许递归？
const foo = ref([]) effect(()=>{ foo.value.push(1) })
在这个副作用函数中，即会使用到 foo.value（getter 收集依赖），又会修改 foo 数组（触发依赖）。如果允许递归，会无限循环。
至此，ref 依赖收集和触发的逻辑，已经比较清晰了。
那么，接下来，我们需要进一步了解的是，effect 函数、ReactiveEffect 副作用对象、副作用函数，它们是什么，它们之间有什么关系？
