Vue3 响应式系统源码解读：揭秘 reactivity 和 effect 的内部机制

2024-02-17 18:39:15

在 Vue3 的世界里，响应式系统就像一个神奇的魔术师，它能让你的数据随着用户的操作而自动更新，页面也随之焕然一新。虽然响应式系统的概念已经被大家广泛讨论，但深入到源码层面，探究 reactivity 和 effect 的内部运作机制，仍然能带给我们不少启发。现在，就让我们一起踏上这段源码探索之旅，揭开 Vue3 响应式系统的神秘面纱吧！

reactivity：响应式魔法的起点

reactivity 可以说是 Vue3 响应式系统的核心，它赋予了普通 JavaScript 对象神奇的魔力，让它们能够感知自身属性的变化。reactivity 的秘密武器就是 Proxy 对象，它就像一个忠实的守护者，时刻监视着对象的属性，一旦属性被访问或修改，它就会立即触发相应的回调函数。

在 Vue3 的源码中，reactivity 模块定义了一个名为 reactive 的函数，它的作用就是将一个普通的 JavaScript 对象转换成一个响应式对象。这个 reactive 函数内部使用了 Proxy 对象，并且设置了一个名为 _track 的 getter 函数。这个 getter 函数会在属性被访问的时候调用 track 函数，从而记录下哪些 effect 函数依赖了这个属性。

effect：追踪依赖关系的侦探

effect 就像是 reactivity 的好搭档，它负责追踪函数中对响应式对象的依赖关系。一旦响应式对象发生了变化，effect 就会像一个敏锐的侦探一样，立即通知那些依赖它的函数重新执行，确保页面上的内容始终与数据保持同步。

在源码中，effect 函数使用一个栈来存储正在运行的 effect 函数。当一个 effect 函数开始执行时，它会遍历自己内部使用的所有响应式对象，并调用 track 函数将自己添加到这些对象的依赖列表中。这样一来，当响应式对象发生变化时，effect 函数就能从依赖列表中找到所有依赖它的 effect 函数，并触发它们重新执行。

reactivity 和 effect 的完美配合

reactivity 和 effect 在 Vue3 响应式系统中就像一对默契的舞伴，它们紧密协作，共同完成了响应式系统的魔法。reactivity 通过 Proxy 对象追踪响应式对象的属性变化，而 effect 则追踪函数中对这些对象的依赖关系。当响应式对象发生变化时，effect 就会根据依赖关系自动触发相应的函数重新执行，从而保证页面内容的实时更新。

实例：亲眼见证 reactivity 和 effect 的魔法

为了更好地理解 reactivity 和 effect 的协同作用，我们来看一个简单的例子：

const obj = reactive({ foo: 'bar' });
const effectFn = effect(() => {
  console.log(obj.foo);
});
obj.foo = 'new value';

在这个例子中，我们首先使用 reactive 函数将一个普通的 JavaScript 对象 obj 转换成一个响应式对象。然后，我们使用 effect 函数定义了一个名为 effectFn 的函数，这个函数会打印 obj.foo 的值。由于 effectFn 函数内部使用了响应式对象 obj，所以 effect 函数会自动将 effectFn 添加到 obj.foo 的依赖列表中。

当我们修改 obj.foo 的值时，reactivity 机制会检测到这个变化，并通知 effect 函数。effect 函数会根据依赖列表找到 effectFn，并触发它重新执行。因此，控制台会打印出 'new value'。