Vue 3源码极客之：`Vue`的`reactive`系统如何处理循环引用：例如`a.b = b`和`b.a = a`。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们来聊聊Vue 3响应式系统里一个挺有意思的话题：循环引用。这玩意儿就像爱情，缠缠绵绵到天涯，但处理不好就容易死机。

开场白：循环引用，爱的魔力转圈圈

在Vue 3的响应式系统中，reactive函数负责将一个普通对象转换成响应式对象。响应式对象的一个核心特性就是，当它的属性被访问或修改时，会触发依赖追踪或更新。这看起来很美好，但如果对象之间存在循环引用，比如a.b = b和b.a = a，那就会进入一个“爱的魔力转圈圈”的状态，无限递归下去，搞不好浏览器就直接崩溃了。

正文：Vue 3如何优雅地解决循环引用问题

Vue 3并没有采用什么黑魔法，而是使用了相对简单但非常有效的策略：弱引用（WeakRef）和缓存（Cache）。

缓存机制：记录已经响应式化的对象

当reactive函数接收到一个对象时，它首先会检查这个对象是否已经被响应式化过了。如果是，直接返回缓存中的响应式对象，避免重复处理。

// packages/reactivity/src/reactive.ts

const reactiveMap = new WeakMap<object, any>() // 缓存普通对象到响应式对象的映射

export function reactive(target: object) {
  if (reactiveMap.has(target)) {
    return reactiveMap.get(target)
  }

  const proxy = new Proxy(target, { /* ... proxy handlers ... */ });
  reactiveMap.set(target, proxy); // 缓存
  return proxy;
}

这段代码展示了reactiveMap的用法。它是一个WeakMap，用来存储普通对象到其对应的响应式代理对象的映射。当reactive函数被调用时，它首先检查reactiveMap中是否已经存在该对象的映射。如果存在，则直接返回缓存的响应式对象；否则，创建一个新的响应式代理对象，并将其与原始对象一起存储在reactiveMap中。

使用 WeakMap 的好处是：

避免内存泄漏： 当原始对象不再被引用时，WeakMap 中的对应条目会被自动垃圾回收，防止内存泄漏。
键的唯一性： WeakMap 的键只能是对象，这保证了每个原始对象只能对应一个响应式代理对象。

深层响应式转换中的循环引用处理：使用WeakSet记录已遍历对象

为了防止在深层响应式转换过程中由于循环引用导致的无限递归，Vue 3 使用 WeakSet 来记录已经遍历过的对象。

// packages/reactivity/src/reactive.ts (简化的深层响应式化逻辑)

const toReactive = (value: any) => {
  if (typeof value !== 'object' || value === null) {
    return value;
  }

  if (isReactive(value)) {
    return value;
  }

  if (reactiveMap.has(value)) {
    return reactiveMap.get(value);
  }

  const existingProxy = reactiveMap.get(value);
  if (existingProxy) {
    return existingProxy;
  }

  const proxy = new Proxy(value, { /* ... proxy handlers ... */ });
  reactiveMap.set(value, proxy);
  return proxy;
}

function deepReactive(target: any, collectionType: boolean = false, alreadyProcessed: WeakSet<object> = new WeakSet()) {

  if (typeof target !== 'object' || target === null) {
    return target
  }

  if (alreadyProcessed.has(target)) {
      return target; // 避免循环引用
  }

  alreadyProcessed.add(target);

  for (const key in target) {
      if (Object.prototype.hasOwnProperty.call(target, key)) {
          target[key] = deepReactive(target[key], collectionType, alreadyProcessed);
      }
  }

  return toReactive(target);
}

deepReactive 函数递归地遍历对象的属性，并对每个属性进行响应式转换。alreadyProcessed 参数是一个 WeakSet，用于跟踪已经处理过的对象。在每次递归调用 deepReactive 之前，会先检查当前对象是否已经在 alreadyProcessed 中。如果在，则说明遇到了循环引用，直接返回当前对象，避免无限递归。

举个栗子：代码演示

为了更直观地理解，我们来用代码模拟一下这个过程：

// 模拟 reactive 函数 (简化版)

const reactiveMap = new WeakMap();
const alreadyProcessed = new WeakSet();

function reactive(target) {
  if (typeof target !== 'object' || target === null) {
    return target; // 非对象，直接返回
  }

  if (reactiveMap.has(target)) {
    return reactiveMap.get(target); // 已缓存，直接返回
  }

  if (alreadyProcessed.has(target)) {
      return target; // 循环引用，直接返回
  }
  alreadyProcessed.add(target);

  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      console.log(`Getting ${key}`);
      return reactive(Reflect.get(target, key, receiver)); // 递归响应式化
    },
    set(target, key, value, receiver) {
      console.log(`Setting ${key} to ${value}`);
      return Reflect.set(target, key, value, receiver);
    }
  });

  reactiveMap.set(target, proxy);
  return proxy;
}

// 创建循环引用对象
const a = {};
const b = {};
a.b = b;
b.a = a;

// 将对象 a 响应式化
const reactiveA = reactive(a);

// 访问 reactiveA.b.a.b.a，观察输出
console.log(reactiveA.b.a.b.a);

// 清除全局的 `alreadyProcessed`，确保每次测试都是全新的状态
alreadyProcessed.clear();

const c = { d: {} };
c.d.e = c;

const reactiveC = reactive(c);

console.log(reactiveC.d.e.d.e);

运行这段代码，你会发现，即使存在循环引用，程序也不会崩溃，而是正常输出了结果。这是因为reactive函数在遇到已经处理过的对象时，直接返回了该对象，避免了无限递归。

深入剖析：为什么使用 WeakMap 和 WeakSet？

你可能会问，为什么 Vue 3 要使用 WeakMap 和 WeakSet，而不是普通的 Map 和 Set 呢？

关键在于内存管理。WeakMap 和 WeakSet 对键（key）是弱引用。这意味着，当原始对象不再被其他地方引用时，垃圾回收器可以回收它，即使它仍然作为 WeakMap 或 WeakSet 的键存在。这可以有效防止内存泄漏。

如果使用普通的 Map 和 Set，即使原始对象不再被其他地方引用，它们仍然会被 Map 和 Set 引用着，导致垃圾回收器无法回收它们，从而造成内存泄漏。

表格总结：

特性	`WeakMap`	`Map`	`WeakSet`	`Set`
键类型	对象	任意类型	对象	任意类型
键的引用	弱引用	强引用	弱引用	强引用
内存管理	避免内存泄漏	可能导致内存泄漏	避免内存泄漏	可能导致内存泄漏
迭代	不可迭代，无法获取键列表	可迭代，可以获取键列表	不可迭代，无法获取元素列表	可迭代，可以获取元素列表
应用场景	存储对象的元数据，且不影响对象的垃圾回收	存储任意键值对，需要手动管理内存	跟踪对象的存在性，且不影响对象的垃圾回收	跟踪元素的集合，需要手动管理内存
Vue 3 用途	缓存普通对象到响应式对象的映射，避免重复响应式化	不适用	记录已经遍历过的对象，避免循环引用导致的无限递归	不适用

扩展思考：除了循环引用，还有什么需要注意的？

除了循环引用，在使用 Vue 3 的响应式系统时，还有一些其他的注意事项：

避免直接修改响应式对象： 尽量使用 reactive 函数返回的代理对象，而不是直接修改原始对象。这样可以确保依赖追踪和更新能够正常工作。
理解 shallowReactive 和 readonly： shallowReactive 只会对对象的第一层属性进行响应式化，而 readonly 会使对象变为只读。根据不同的需求选择合适的 API。
大型对象性能优化： 对于大型对象，可以考虑使用 shallowReactive 或手动控制更新，以提高性能。
处理数组： Vue 3 对数组的响应式处理也进行了一些优化。例如，通过索引修改数组元素、修改数组的 length 属性、使用 push、pop、shift、unshift、splice、sort、reverse 等方法都会触发更新。

总结：

Vue 3 通过缓存机制（WeakMap）和深层响应式转换中的循环引用处理机制（WeakSet），优雅地解决了循环引用问题，避免了无限递归和内存泄漏。理解这些机制，可以帮助我们更好地使用 Vue 3 的响应式系统，编写更健壮、更高效的代码。

小贴士：调试技巧

如果遇到响应式系统相关的问题，可以使用 Vue Devtools 来调试。Vue Devtools 可以帮助你查看响应式对象的依赖关系、触发更新的原因等等，让你更清晰地了解程序的运行状态。

今天的分享就到这里，希望对大家有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复