Vue3的响应式系统是如何实现的——深度解析reactive

在之前的文章中，我们对 Vue3 的响应式系统有了一个初步的了解，知道了 effect、track 和 trigger 这些核心概念，也明白了它们是如何处理对象属性的 get 和 set 操作的。但是，实际情况远比这复杂，Vue3 需要处理的不仅仅是简单的对象，还有数组、Map、Set 等数据结构。今天，我们就来深入探讨一下 reactive 函数的实现原理，看看 Vue3 是如何将普通对象转化为神奇的响应式对象的。

reactive 函数就像一个魔法师，它可以将一个普通的 JavaScript 对象变成一个具有“魔力”的响应式对象。这个“魔力”指的是，当我们修改这个响应式对象的属性时，Vue3 能够自动感知到变化，并更新使用到这个属性的地方。那么，reactive 是如何施展魔法的呢？

其实，reactive 的魔法奥秘在于 代理 。当我们调用 reactive 函数时，它并不会直接修改传入的原始对象，而是会创建一个新的 代理对象 。这个代理对象就像原始对象的替身，它拥有和原始对象一模一样的数据结构和属性，但它还具备一项特殊能力：拦截 。

代理对象可以拦截我们对原始对象属性的所有操作，比如读取属性值、修改属性值等等。当我们读取代理对象的某个属性时，代理对象会偷偷地将当前正在执行的 effect 函数记录下来，这就叫做 依赖收集 。当我们修改代理对象的某个属性时，代理对象就会通知所有依赖这个属性的 effect 函数重新执行，这就叫做 依赖更新 。

依赖收集和依赖更新这两个步骤，就是 Vue3 响应式系统的核心机制。通过这两个步骤，Vue3 实现了自动追踪数据变化并更新视图的功能。

为了更好地理解 reactive 的实现原理，我们来详细分析一下它的几个关键步骤：

1. 创建代理对象：

Vue3 使用 ES6 的 Proxy API 来创建代理对象。Proxy API 允许我们创建一个对象的“代理”，并拦截对这个对象的操作。当我们调用 reactive 函数时，它会使用 Proxy API 创建一个代理对象，并将原始对象作为代理的目标对象。

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      // 收集依赖
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      // 触发更新
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, key);
      }
      return result;
    }
  });
}

2. 依赖收集：

当我们读取代理对象的某个属性时，get 拦截器会被触发。在 get 拦截器中，我们会调用 track 函数来收集依赖。track 函数会将当前正在执行的 effect 函数与被读取的属性关联起来，这样当属性发生变化时，就能通知到对应的 effect 函数。

3. 依赖更新：

当我们修改代理对象的某个属性时，set 拦截器会被触发。在 set 拦截器中，我们会先修改原始对象的属性值，然后调用 trigger 函数来触发更新。trigger 函数会找到所有依赖这个属性的 effect 函数，并执行它们。

通过以上三个步骤，reactive 函数就成功地将一个普通对象变成了一个响应式对象。当我们修改响应式对象的属性时，Vue3 就能自动感知到变化，并更新使用到这个属性的地方，从而实现视图的自动更新。

常见问题解答：

1. reactive 和 ref 有什么区别？

reactive 用于将普通对象转换为响应式对象，而 ref 用于创建单个响应式数据。reactive 返回的是一个代理对象，而 ref 返回的是一个 Ref 对象，需要通过 .value 属性访问其值。

2. 为什么需要使用 reactive 而不是直接修改原始对象？

直接修改原始对象不会触发 Vue3 的响应式系统，因为 Vue3 无法追踪到原始对象的属性变化。使用 reactive 创建的代理对象可以拦截对属性的操作，从而触发依赖收集和依赖更新。

3. reactive 可以处理哪些类型的数据？

reactive 可以处理对象类型的数据，包括普通对象、数组、Map 和 Set 等。

4. reactive 的性能如何？

reactive 使用 Proxy API 来实现，Proxy API 的性能比 Object.defineProperty() 方法要好，因此 reactive 的性能也比较好。

5. reactive 可以嵌套使用吗？

可以，reactive 可以嵌套使用，例如 reactive({ a: reactive({ b: 1 }) })。这样可以创建多层嵌套的响应式对象。