《Vuejs 设计与实现》第 4 章（响应式系统）( 下 )

目录

4.6 避免无限递归循环

4.7 调度执行

4.8 计算属性 computed 与 lazy

4.9 watch 的实现原理

4.10 立即执行的 watch 与回调执行时机

4.11 过期副作用与竞态问题

总结

---

4.6 避免无限递归循环

在实现完善响应式系统时，需要注意避免无限递归循环。以以下代码为例：

const data = { foo: 1 }
const obj = new Proxy(data, { /*...*/ })effect(() => obj.foo++) // 既会读取 obj.foo 的值，又会设置 obj.foo 的值

上述代码，effect 注册的副作用函数会触发栈溢出。为什么呢？
其实，我们可以将 obj.foo++ 分解为看作是两个步骤：读取 obj.foo 的值并给它增加 1：

effect(() => {// 语句obj.foo = obj.foo + 1
})

上述代码，我们首先读取 obj.foo 的值，触发数据追踪（track）操作，将当前的副作用函数添加到依赖列表。
然后，我们对 obj.foo 赋值，这会触发触发器（trigger）操作，从依赖列表中取出并执行所有的副作用函数。
这就引发了问题，因为我们正在执行的副作用函数还没结束，就开始了下一次的执行，从而导致了无限递归调用，最终引发栈溢出。

解决办法是在 trigger 动作发生时增加守卫条件，如果 trigger 触发执行的副作用函数与当前正在执行的副作用函数相同，则不触发执行。代码如下：

function trigger(target, key) {const depsMap = bucket.get(target)if (!depsMap) returnconst effects = depsMap.get(key)const effectsToRun = new Set()effects && effects.forEach(effectFn => {// 如果 trigger 触发执行的副作用函数与当前正在执行的副作用函数相同，则不触发执行if (effectFn !== activeEffect) { // 新增effectsToRun.add(effectFn)}})effectsToRun.forEach(effectFn => effectFn())
}

通过这种方式，我们可以避免无限递归调用和栈溢出。

4.7 调度执行

调度性是响应式系统的重要特性，它允许我们决定副作用函数执行的时机、次数和方式。以以下的代码为例：

const data = { foo: 1 }
const obj = new Proxy(data, { /* ... */ })effect(() => {console.log(obj.foo)
})obj.foo++console.log('结束了')

现在，假设我们希望改变输出顺序，但不改变代码结构。这就需要在响应系统中支持调度。
为了实现可调度性，我们可以为 effect 函数添加一个选项参数 options，允许用户指定调度器：

effect(() => {console.log(obj.foo)},{scheduler(fn) {// ...}}
)

在调用 effect 函数注册副作用函数时，用户可以传入第二个参数 options。
这是一个对象，可以指定 scheduler 调度函数。同时，我们需要将 options 选项绑定到对应的副作用函数上：

function effect(fn, options = {}) {const effectFn = () => {cleanup(effectFn)// 当调用 effect 注册副作用函数时，将副作用函数赋值给 activeEffectactiveEffect = effectFn// 在调用副作用函数之前将当前副作用函数压栈effectStack.push(effectFn)fn()// 在当前副作用函数执行完毕后，将当前副作用函数弹出栈，并把 activeEffect 还原为之前的值effectStack.pop()activeEffect = effectStack[effectStack.length - 1]}// 将 options 挂载到 effectFn 上effectFn.options = options // 新增// activeEffect.deps 用来存储所有与该副作用函数相关的依赖集合effectFn.deps = []// 执行副作用函数effectFn()
}

有了 调度函数，我们在 trigger 函数中触发副作用函数重新执行时，就可以直接调用用户传递的调度器函数，从而把控制权交给用户：

function trigger(target, key) {const depsMap = bucket.get(target)if (!depsMap) returnconst effects = depsMap.get(key)const effectsToRun = new Set()effects &&effects.forEach(effectFn => {if (effectFn !== activeEffect) {effectsToRun.add(effectFn)}})effectsToRun.forEach(effectFn => {// 如果一个副作用函数存在调度器，则调用该调度器，并将副作用函数作为参数传递if (effectFn.options.scheduler) {effectFn.options.scheduler(effectFn) // 新增} else {// 否则直接执行副作用函数（之前的默认行为）effectFn() // 新增}})
}

这样，当触发副作用函数时，我们首先检查副作用函数是否有调度器。
如果有，我们调用调度器函数，并将当前的副作用函数作为参数传递，由用户自己控制执行方式；
否则，我们保持默认行为，即直接执行副作用函数。

有了上面基础设施的支持下，我们使用 setTimeout 开启一个宏任务来执行副作用函数 fn，这样就能更灵活控制代码的执行顺序了。

const data = { foo: 1 }
const obj = new Proxy(data, { /* ... */ })effect(() => {console.log(obj.foo)},{scheduler(fn) {setTimeout(fn)}}
)obj.foo++console.log('结束了')

输出结果：

1
'结束了'
2

通过调度器，我们还可以控制副作用函数的执行次数。这是一个重要的特性，如下所示：

const data = { foo: 1 }
const obj = new Proxy(data, { /* ... */ })effect(() => {console.log(obj.foo)
})obj.foo++
obj.foo++

在这个例子中，obj.foo 的值从 1 增加到 3，2 只是过渡状态。
如果我们只关心最终结果而不关心过程，那么打印过渡状态就是多余的。我们希望输出：'1'，'3'。基于调度器，我们可以轻松实现：

// 定义一个任务队列
const jobQueue = new Set()
// 使用 Promise.resolve() 创建一个 promise 实例，我们用它将一个任务添加到微任务队列
const p = Promise.resolve()// 一个标志代表是否正在刷新队列
let isFlushing = false
function flushJob() {// 如果队列正在刷新，则什么都不做if (isFlushing) return// 设置为 true，代表正在刷新isFlushing = true// 在微任务队列中刷新 jobQueue 队列p.then(() => {jobQueue.forEach(job => job())}).finally(() => {// 结束后重置 isFlushingisFlushing = false})
}effect(() => {console.log(obj.foo)},{scheduler(fn) {// 每次调度时，将副作用函数添加到 jobQueue 队列中jobQueue.add(fn)// 调用 flushJob 刷新队列flushJob()},}
)obj.foo++
obj.foo++

上述代码，我们首先定义了一个任务队列 jobQueue，利用了 Set 数据结构的自动去重能力。
在调度函数中，我们将当前的副作用函数添加到 jobQueue 队列，再调用 flushJob 函数刷新队列。
在 flushJob 函数内部，该函数通过 isFlushing 标志判断是否需要执行，只有当其为 false 时才需要执行，而一旦 flushJob 函数开始执行，isFlushing 标志就会设置为 true，意思是无论调用多少次 flushJob 函数，在一个周期内都只会执行一次。
需要注意的是，在 flushJob 内通过 p.then 将一个函数 添加到微任务队列，在微任务队列内完成对 jobQueue 的遍历执行。
结果是，连续两次自增操作，虽然调度函数执行了两次，但因为 Set 的去重能力，jobQueue 中只有一个副作用函数。
类似地，flushJob 也会同步且连续地执行两次，但由于 isFlushing 标志的存在，实际上 flushJob 函数在一个事件循环内只会执行一次， 即在微任务队列内执行一次。
当微任务队列开始执行时，就会遍历 jobQueue 并执行里面存储的副作用函数。
由于此时 jobQueue 队列内只有一个副作用函数，所以只会执行一次，并且当它执行时，字段 obj.foo 的值已经是 3 了，这样我们就实现了期望的输出：

1
3

这个功能类似于 Vue.js 中，连续多次修改响应式数据只会触发一次更新。
实际上，Vue.js内部实现了一个更加完善的调度器，其思路与我们刚才介绍的一致。

4.8 计算属性 computed 与 lazy

在某些场景下，我们希望副作用函数不立即执行，而是在需要时执行，例如计算属性。
这时，我们可以在 options 中添加 lazy 属性来实现，如下：

effect(// 指定了 lazy 选项，这个函数不会立即执行() => {console.log(obj.foo)},// options{lazy: true}
)

我们可以修改 effect 函数的实现逻辑，当 options.lazy 为 true 时，不立即执行副作用函数：

function effect(fn, options = {}) {const effectFn = () => {cleanup(effectFn)activeEffect = effectFneffectStack.push(effectFn)fn()effectStack.pop()activeEffect = effectStack[effectStack.length - 1]}effectFn.options = optionseffectFn.deps = []// 只有非 lazy 的时候，才执行if (!options.lazy) {// 执行副作用函数effectFn()}// 将副作用函数作为返回值返回return effectFn
}

当调用 effect 函数时，通过其返回值能够拿到对应的副作用函数，这样我们就能手动执行该副作用函数了：

const effectFn = effect(() => {console.log(obj.foo)
}, { lazy: true })// 手动执行副作用函数
effectFn()

如果仅仅能够手动执行副作用函数，意义并不大。
但如果我们把传递给 effect 的函数看作一个 getter，那么这个 getter 函数可以返回任何值，例如：

const effectFn = effect(// getter 返回 obj.foo 与 obj.bar 的和() => obj.foo + obj.bar,{ lazy: true }
)

这样我们在手动执行副作用函数时，就能够拿到其返回值：

const effectFn = effect(// getter 返回 obj.foo 与 obj.bar 的和() => obj.foo + obj.bar,{ lazy: true }
)// value 是 getter 的返回值
const value = effectFn()

为了实现这个目标，我们需要再次修改 effect 函数：

function effect(fn, options = {}) {const effectFn = () => {cleanup(effectFn)activeEffect = effectFneffectStack.push(effectFn)// 将 fn 的执行结果存储到 res 中const res = fn()effectStack.pop()activeEffect = effectStack[effectStack.length - 1]// 将 res 作为 effectFn 的返回值return res // 新增}effectFn.options = optionseffectFn.deps = []if (!options.lazy) {effectFn()}return effectFn
}

通过这些修改，我们可以在执行 effectFn 时，获取到真正副作用函数 fn 的执行结果。
现在我们已经实现了具有懒执行的副作用函数，我们就可以实现计算属性了：
 

function computed(getter) {// 创建一个 lazy 的 effect，getter 作为副作用函数const effectFn = effect(getter, { lazy: true });const obj = {// effectFn 仅在访问 value 时执行get value() {return effectFn();}};return obj;
}

这里，我们首先定义了一个 computed 函数，接收一个 getter 函数作为参数。在访问对象的 value 属性时，执行 effectFn 并返回其结果。

我们可以使用 computed 函数来创建计算属性：

const data = { foo: 1, bar: 2 };
const obj = new Proxy(data, { /* ... */ });const sumRes = computed(() => obj.foo + obj.bar);console.log(sumRes.value) // 3

这里实现的计算属性进行了懒计算，即只有当你真正读取 sumRes.value 时，才会进行计算并得到值。
但是，它不能缓存值。即使 obj.foo 和 obj.bar 的值没有变化，每次访问 sumRes.value 都会触发多次计算：

console.log(sumRes.value) // 输出 3
console.log(sumRes.value) // 输出 3
console.log(sumRes.value) // 输出 3

为了解决这个问题，我们在实现 computed 函数时，需要添加缓存机制：

function computed(getter) {let value;  // 用于缓存上次计算的值let dirty = true;  // 代表是否需要重新计算的标志const effectFn = effect(getter, {lazy: true,// 添加调度器，在调度器中将 dirty 重置为 truescheduler() {dirty = true;}});const obj = {get value() {// 只有“脏”时才计算值，并将得到的值缓存到 value 中if (dirty) {value = effectFn();dirty = false;}return value;}};return obj;
}

现在我们访问 sumRes.value 都只会在第一次访问时进行实际计算，后续直接从缓存读取 value 值。
当我们修改 obj.foo 或 obj.bar 的值，就会发现 sumRes.value 的值也发生了改变。
但是，如果我们在另一个 effect 中读取计算属性的值，当计算属性的值变化时，它并不会触发副作用函数的执行，如下所示：

const sumRes = computed(() => obj.foo + obj.bar)effect(() => {// 在该副作用函数中读取 sumRes.valueconsole.log(sumRes.value)
})// 修改 obj.foo 的值
obj.foo++

本质上看这就是一个典型的 effect 嵌套。一个计算属性内部拥有自己的 effect，并且它是懒执行的，只有当真正读取计算属性的值时才会执行。
对于计算属性的 getter 函数来说，它里面访问的响应式数据只会把 computed 内部的 effect 收集为依赖。而当把计算属性用于另外一个 effect
时，就会发生 effect 嵌套，外层的 effect 不会被内层 effect 中的响应式数据收集。
解决这个问题的方法是，在读取计算属性的值时，手动调用 track 函数进行追踪；
当计算属性依赖的响应式数据发生变化时，手动调用 trigger 函数触发响应：

function computed(getter) {let value;let dirty = true;const effectFn = effect(getter, {lazy: true,scheduler() {if (!dirty) {dirty = true;// 当计算属性依赖的响应式数据变化时，手动调用 trigger 函数触发响应trigger(obj, 'value');}}});const obj = {get value() {if (dirty) {value = effectFn();dirty = false;}// 当读取 value 时，手动调用 track 函数进行追踪track(obj, 'value');return value;}};return obj;
}

这样，无论我们在哪里读取计算属性的值，只要计算属性的值发生变化，都会触发相应的响应。
当读取一个计算属性的 value 值时，我们手动调用 track 函数，把计算属性返回的对象 obj 作为 target，作为第一个参数传递给 track 函数。
当计算属性所依赖的响应式数据变化时，会执行调度器函数，在调度器函数内手动调用 trigger 函数触发响应即可。这时，对于如下代码来说：

effect(function effectFn() {console.log(sumRes.value)
})

它会建立这样的联系：

computed(obj)└── value└── effectFn

这样，在其他 effect 中访问计算属性的值时，该 effect 就会因为计算属性值的变化而触发：

const sumRes = computed(() => obj.foo + obj.bar)effect(() => {console.log(sumRes.value)
})obj.foo++

在这段代码中，修改 obj.foo 的值会触发 effect。

4.9 watch 的实现原理

所谓 watch，其本质就是观测一个响应式数据，当数据发生变化时通知并执行相应的回调函数。以此为例：

watch(obj, () => {console.log('数据发生变化')
})// 当响应数据的值改变时，回调函数将被触发
obj.foo++

实际上，watch 的实现本质上就是利用了 effect 以及 options.scheduler 选项：

effect(() => {console.log(obj.foo)
}, {scheduler() {// 当 obj.foo 的值改变时，scheduler 调度函数将被执行}
})

当响应式数据发生变化时，会触发 scheduler 调度函数执行，而非直接触发副作用函数执行。
从这个角度来看，其实 scheduler 调度函数就相当于一个回调函数，而 watch 的实现就是利用了这个特点。下面是最简单的 watch 函数的实现：

// watch 函数接收两个参数，source 是响应式数据，cb 是回调函数
function watch(source, cb) {effect(// 触发读取操作，从而建立联系() => source.foo,{scheduler() {// 当数据变化时，调用回调函数 cbcb()}})
}

我们可以使用 watch 函数如下：

const data = { foo: 1 }
const obj = new Proxy(data, { /* ... */ })watch(obj, () => {console.log('数据变化了')
})obj.foo++

上面这段代码能正常工作，但在之前的 watch 函数的实现中，硬编码了对 source.foo 的读取操作，我们需要封装一个通用的读取操作：

function watch(source, cb) {effect(// 调用 traverse 递归地读取() => traverse(source),{scheduler() {// 当数据变化时，调用回调函数 cbcb()}})
}function traverse(value, seen = new Set()) {// 如果要读取的数据是原始值，或者已经被读取过了，那么什么都不做if (typeof value !== 'object' || value === null || seen.has(value)) return// 将数据添加到 seen 中，代表遍历地读取过了，避免循环引用引起的死循环seen.add(value)// 暂时不考虑数组等其他结构// 假设 value 就是一个对象，使用 for...in 读取对象的每一个值，并递归地调用 traverse 进行处理for (const k in value) {traverse(value[k], seen)}return value
}

上述代码，调用 traverse 函数进行递归的读取，这样就能读取一个对象任意属性，从而当任意属性发生变化时都能够触发回调函数执行。
watch 函数除了可以观测响应式数据，还可以接收一个 getter 函数：

watch(// getter 函数() => obj.foo,// 回调函数() => {console.log('obj.foo 的值变了')}
)

传递给 watch 函数变成了 getter 函数，在 getter 函数内部，用户可以指定该 watch 依赖哪些响应式数据，只有当这些数据变化时，才会触发回
调函数执行。如下代码实现了这一功能：

function watch(source, cb) {// 定义 getterlet getter// 如果 source 是函数，说明用户传递的是 getter，所以直接把 source 赋值给 getterif (typeof source === 'function') {getter = source} else {// 否则按照原来的实现调用 traverse 递归地读取getter = () => traverse(source)}effect(// 执行 getter() => getter(),{scheduler() {cb()}})
}

判断 source 类型，如果是函数类型，说明用户直接传递了 getter 函数，这时直接使用用户的 getter 函数，如果不是函数则使用原来做法。
这样就实现了自定义 getter 的功能

目前 watch 的回调函数拿不到旧值与新值。
那么如何获得新值与旧值呢？这需要充分利用 effect 函数的 lazy 选项：

function watch(source, cb) {let getterif (typeof source === 'function') {getter = source} else {getter = () => traverse(source)}// 定义旧值与新值let oldValue, newValue// 使用 effect 注册副作用函数时，开启 lazy 选项，并把返回值存储到 effectFn 中以便后续手动调用const effectFn = effect(() => getter(),{lazy: true,scheduler() {// 在 scheduler 中重新执行副作用函数，得到的是新值newValue = effectFn()// 将旧值和新值作为回调函数的参数cb(newValue, oldValue)// 更新旧值，不然下一次会得到错误的旧值oldValue = newValue}})// 手动调用副作用函数，拿到的值就是旧值oldValue = effectFn()
}

我们手动调用 effectFn 函数得到的返回值就是旧值，即第一次执行得到的值。
当变化发生并触发 scheduler 调度函数执行时，会重新调用 effectFn 函数并得到新值，这样我们就拿到了旧值与新值，将它们作为参数传递给回调函数 cb 就可以了。
最后一件非常重要的事情是，不要忘记使用新值更新旧值，否则下一次变更发生时会得到错误的旧值。
这样，我们就完成了一个简化版的 watch 函数实现。

4.10 立即执行的 watch 与回调执行时机

默认情况下的 watch 回调函数，watch 的回调只在被观察的响应式数据发生变化时触发：

// 回调函数仅在响应式数据 obj 发生变化时执行
watch(obj, () => {console.log('变化了')
})

在 Vue.js 中，我们可以通过 immediate 参数来设定回调函数是否需要立即执行：

watch(obj, () => {console.log('变化了')
}, {// 创建 watch 时，回调函数会立即执行一次immediate: true
})

当 immediate 参数为 true，回调函数在创建该 watch 时就会立即执行。实际上，回调函数的立即执行与后续执行并没有本质区别。
因此，我们可以将调度函数 scheduler 封装为一个通用函数 job，让它在初始化和数据变更时都会被执行：

function watch(source, cb, options = {}) {let getter;if (typeof source === 'function') {getter = source;} else {getter = () => traverse(source);}let oldValue, newValue;// 将 scheduler 的调度功能抽取为一个独立的 job 函数const job = () => {newValue = effectFn();cb(newValue, oldValue);oldValue = newValue;};const effectFn = effect(// 执行 getter() => getter(),{lazy: true,// 使用 job 函数作为调度函数scheduler: job});if (options.immediate) {// 当 immediate 为 true，立即执行 job，从而触发回调函数执行job();} else {oldValue = effectFn();}
}

这样，我们就实现了回调函数的立即执行功能。由于回调函数在首次执行时并无旧值可言，此时的 oldValue 值为 undefined，这符合预期的行为。

除此之外，我们还可以指定 watch 回调的执行时机。例如，在 Vue3 中，我们可以使用 flush 参数来设定：

watch(obj, () => {console.log('变化了');
}, {// 创建 watch 时，回调函数会立即执行一次flush: 'pre' // 可选 'post' 或 'sync'
});

flflush 选项本质上是控制调度函数的执行时机。之前我们已经讲过如何在微任务队列中执行调度函数 scheduler，这与 flush 的功能相同。
当 flush 设为 'post'，意味着调度函数会将副作用函数放到微任务队列中，等待 DOM 更新后再执行，如下所示：

function watch(source, cb, options = {}) {let getterif (typeof source === 'function') {getter = source} else {getter = () => traverse(source)}let oldValue, newValueconst job = () => {newValue = effectFn()cb(newValue, oldValue)oldValue = newValue}const effectFn = effect(// 执行 getter() => getter(),{lazy: true,scheduler: () => {// 在调度函数中判断 flush 是否为 'post'，如果是，将其放到微任务队列中执行if (options.flush === 'post') {const p = Promise.resolve()p.then(job)} else {job()}},})if (options.immediate) {job()} else {oldValue = effectFn()}
}

上述代码中，我们修改了 scheduler 的实现。如果 options.flush 设为 'post'，则 job 函数会放入微任务队列，从而实现异步延迟执行。
否则，job 函数会直接执行，相当于 'sync' 的实现机制，即同步执行。
对于 options.flush 设为 'pre' 的情况，我们目前无法模拟，因为这涉及到组件的更新时机。
'pre' 和 'post' 本质上指的是组件更新前和更新后，但这不影响我们理解如何控制回调函数的执行时机。

4.11 过期副作用与竞态问题

在多进程或多线程编程中，竞态问题常见，尽管前端工程师讨论较少，但在实际场景中也会遇到类似问题。以下是一个例子：

let finalData;watch(obj, async () => {const res = await fetch('/path/to/request');finalData = res;
});

在这段代码中，每次 obj 发生变化时，都会发送网络请求并将结果赋值给 finalData。但这可能导致竞态问题。
 

上面我们认为应该 请求B 的数据才是最终赋值给 finalData 的值。
为了解决这个问题，我们需要实现一个让副作用过期的手段。Vue.js 的 watch 函数提供了 onInvalidate 参数来解决这个问题：

watch(obj, async (newValue, oldValue, onInvalidate) => {// 定义一个标志，代表当前副作用函数是否过期，默认为 false，代表没有过期let expired = false// 调用 onInvalidate() 函数注册一个过期回调onInvalidate(() => {// 当过期时，将 expired 设置为 trueexpired = true})// 发送网络请求const res = await fetch('/path/to/request')// 只有当该副作用函数的执行没有过期时，才会执行后续操作。if (!expired) {finalData = res}
})

在发送请求前，我们定义了 expired 标志变量，用来标识当前副作用函数的执行是否过期。
我们通过 onInvalidate 函数注册一个过期回调，当该副作用函数的执行过期时将 expired 设置为 true。
最后，只有当没有过期时才采用请求结果，避免了竞态问题导致的错误结果。
要实现 onInvalidate 的功能，可以通过以下代码：

function watch(source, cb, options = {}) {let getterif (typeof source === 'function') {getter = source} else {getter = () => traverse(source)}let oldValue, newValue// cleanup 用来存储用户注册的过期回调let cleanup// 定义 onInvalidate 函数function onInvalidate(fn) {// 将过期回调存储到 cleanup 中cleanup = fn}const job = () => {newValue = effectFn()// 在调用回调函数 cb 之前，先调用过期回调if (cleanup) {cleanup()}// 将 onInvalidate 作为回调函数的第三个参数，以便用户使用cb(newValue, oldValue, onInvalidate)oldValue = newValue}const effectFn = effect(// 执行 getter() => getter(),{lazy: true,scheduler: () => {if (options.flush === 'post') {const p = Promise.resolve()p.then(job)} else {job()}},})if (options.immediate) {job()} else {oldValue = effectFn()}
}

在这段代码中，我们定义了 cleanup 变量，用来存储用户通过 onInvalidate 函数注册的过期回调。
在每次执行回调函数 cb 之前，先检查是否存在过期回调，如果存在，则执行过期回调函数 cleanup。
最后我们把 onInvalidate 函数作为回调函数的第三个参数传递给 cb，以便用户使用。
这种方法可以避免过期的副作用函数带来的影响。
我们还是通过一个例子来进一步说明：

watch(obj, async (newValue, oldValue, onInvalidate) => {let expired = falseonInvalidate(() => {expired = true})const res = await fetch('/path/to/request')if (!expired) {finalData = res}
})// 第一次修改
obj.foo++
setTimeout(() => {// 200ms 后做第二次修改obj.foo++
}, 200)

obj 修改了两次，所以 watch 执行了两次。
watch 的回调函数第一次执行的时候，我们已经注册了一个过期回调，所以在 watch 的回调函数第二次执行之前，会优先执行之前注册的过期回调。
这会使得第一次执行的副作用函数内闭包的变量 expired 的值变为 true，即副作用函数的执行过期了。
于是等请求 A 的结果返回时，其结果会被抛弃，从而避免了过期的副作用函数带来的影响，如图所示：

总结

本章我们深入探讨了副作用函数与响应式数据的关系。我们明确了响应式数据的基本实现依赖于“读取”和“设置”操作的拦截，连接副作用函数与响应式数据。当读取数据，我们将副作用函数存储，而在设置数据时，我们将存储的副作用函数取出并执行，这是响应系统的核心实现原理。
我们构建了一个完整的响应系统，用 WeakMap 和 Map 创建新的存储结构，确保响应式数据与副作用函数之间的精确关联。此外，我们分析了 WeakMap 和 Map 的差异，其中 WeakMap 的弱引用特性不会妨碍垃圾回收。
在解决分支切换导致的冗余副作用问题时，我们清除上一次建立的响应关系，重新建立新的关系。在此过程中，我们避免了遍历 Set 数据结构导致的无限循环问题，通过创建新的 Set 结构进行遍历。
讨论嵌套的副作用函数时，我们引入了副作用函数栈来管理不同的副作用函数，解决了响应关系的混乱问题。同时，我们处理了副作用函数无限递归调用自身，导致栈溢出的问题。
我们增强了响应系统的可调度性，即可以决定副作用函数执行的时机、次数及方式。我们为 effect 函数增加了调度器选项，使用户能自行调度任务。此外，我们解释了如何利用微任务队列实现任务去重。
接着，我们讨论了计算属性（computed），它是一种懒执行的副作用函数，可以通过手动执行更新。当计算属性的依赖数据变化时，会标记属性为“脏”，使下次读取时重新计算。
此外，我们探讨了 watch 的实现，它依赖副作用函数的可调度性。我们在调度器中执行用户注册的回调函数，通过 immediate 选项实现立即执行回调，通过 flush 选项控制回调函数的执行时机。
最后，我们讨论了竞态问题，它源自过期的副作用函数。为解决此问题，Vue.js 设计了 onInvalidate 参数，让用户可以注册过期回调，在回调函数执行前标记副作用为“过期”，从而解决竞态问题。