Vue.js 3 渐进式实现

在这一阶段中，我们着重讨论了响应系统的概念与实现，并简单介绍了响应式数据的基本原理。至此，我们已经完全实现了基础的响应式系统，首先欣赏一下完整代码吧：

上一节中我们继续实现了 watch 的两个特性。这一节中我们将为 watch 实现清理过期副作用的功能，以此来解决竞态问题。

上一节中我们实现了 watch 的基本功能，本节我们继续讨论关于 watch 的两个特性： 立即执行的回调函数和回调函数执行时机。默认情况下，一个 watch 的回调函数只会在响应式数据发生变化时执行

上一节中我们实现了完整的计算属性功能，这一节开始我们来实现 watch。所谓 watch，本质就是观测一个响应式数据，数据发生变化时通知并执行相应的回调函数。

目前我们的实现中，计算属性只是一个有缓存功能的 getter，无法像普通响应式数据一样自身值变化时重新执行所有读取了它的副作用函数。解决方法很简单，像普通的响应式数据一样，在读取计算属性值时调用 tr

目前我们的响应式系统已经可以支持调度执行和懒执行了，在此基础上本节我们开始实现计算属性。首先我们定义一个 computed 函数，它接收一个 getter 作为参数。

懒执行的 effect，即 lazy 的 effect，指的是有些场景下，我们不希望调用 effect 函数后立刻执行传入的副作用函数，而是等到真正需要的时候再执行。

可调度性是响应式系统非常重要的特性。所谓可调度，指的是当响应式数据变化触发副作用函数重新执行时，有能力决定副作用函数执行的时机、次数以及方式。

上一节中我们让响应式系统支持了 effect 的嵌套调用。本节我们来分析为什么会出现无限递归循环问题以及如何解决。如果一个副作用函数读取了一个依赖字段，那么当该字段被设置时，副作用函数重新执行。

在上一节中，我们解决了分支切换时可能产生遗留副作用函数的问题。这一节我们将让我们的响应式系统支持 effect 的嵌套调用。实际上 Vue.js 的渲染函数就是在一个 effect 中执行。而当组件发

上一节中我们把依赖收集和触发的逻辑分别封装到 track 和 trigger 函数中，提升可读性和灵活性。这一节我们来解决分支切换可能会产生遗留副作用函数的问题。

目前的实现中，我们直接在 get 拦截函数里编写把副作用函数收集到“桶”里的逻辑，但更好的做法是将这部分逻辑单独封装到一个 track 函数中，取名 track 是为了表达**追踪**的含义。

现在我们的响应式系统还没有在副作用函数与被操作的目标字段之间建立明确联系。解决这个问题需要重新设计“桶”的数据结构，而不能简单地使用一个 Set 了。

上一节的实现中，我们硬编码了副作用函数名字。而我们希望的是，哪怕副作用函数是一个匿名函数，也能够被正确地收集。为了实现这一点，我们需要提供一个用来注册副作用函数的机制。

使用独创渐进式实现的方式，以更平滑的曲线从 0 开始手写实现 Vue 主要功能模块，深入理解底层实现原理。