Vue 3源码深度解析之：`Vue`的依赖收集：它是如何避免在循环引用中陷入死循环的。

嘿，大家好！我是你们今天的源码探索向导，今天要带大家深入 Vue 3 的心脏地带，聊聊它的依赖收集机制，特别是它如何巧妙地避开那让人头疼的循环引用问题。这可不是什么枯燥的理论课，咱们尽量用大白话，加上实际代码，把这事儿给整明白。

开场：依赖收集，Vue 的“八卦雷达”

首先，得明确一点，Vue 的核心魔法之一就是它的响应式系统。当数据发生变化时，视图能够自动更新。这背后，依赖收集扮演着至关重要的角色。你可以把它想象成 Vue 的“八卦雷达”，时刻监听着哪些地方用到了哪些数据。

简单来说，就是当组件渲染或者计算属性求值的时候，Vue 会记录下哪些响应式数据被读取了。这些被读取的数据，就成了该组件或计算属性的依赖。以后这些数据变化了，Vue 就能精准地通知到对应的组件或计算属性进行更新。

第一幕：track函数，依赖收集的“侦察兵”

依赖收集的核心逻辑，藏在 track 函数里（当然，源码里可能叫别的名字，但核心思想不变）。咱们先来看个简化的版本：

// 简化版的 track 函数
function track(target, type, key) {
  // 1. 获取当前正在执行的 effect (也就是 watcher)
  const effect = activeEffect;

  if (!effect) {
    return; // 没有 effect，说明不是在响应式上下文中，不收集依赖
  }

  // 2. 根据 target (通常是对象) 找到对应的 depsMap
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

  // 3. 根据 key (属性名) 找到对应的 dep (依赖集合)
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }

  // 4. 将当前的 effect (watcher) 添加到 dep 中
  if (!dep.has(effect)) {
    dep.add(effect);
    effect.deps.push(dep); // 反向引用，方便清理 effect
  }
}

// 全局变量，用于存储当前正在执行的 effect
let activeEffect = null;

// 用于存储 target -> key -> dep 的映射关系
const targetMap = new WeakMap(); // WeakMap 避免内存泄漏

// 模拟一个 effect (watcher)
class ReactiveEffect {
  constructor(fn) {
    this.fn = fn;
    this.deps = []; // 存储依赖的 dep 集合
  }

  run() {
    activeEffect = this; // 设置当前正在执行的 effect
    const result = this.fn(); // 执行 effect 的函数
    activeEffect = null; // 清空 activeEffect
    return result;
  }
}

// 示例
const data = { a: 1, b: 2 };
const reactiveData = reactive(data); // 假设 reactive 是 Vue 提供的响应式函数

// 创建一个 effect (watcher)
const effect = new ReactiveEffect(() => {
  console.log('a changed:', reactiveData.a); // 读取了 reactiveData.a，会触发 track
});

effect.run(); // 首次执行，触发依赖收集

reactiveData.a = 10; // 修改 reactiveData.a，触发 effect 重新执行

这段代码模拟了 track 函数的工作流程：

1. 找到当前正在执行的 effect： activeEffect 是一个全局变量，用来记录当前正在执行的 effect （可以理解为 watcher）。只有在 effect 的上下文中，才会进行依赖收集。
2. 构建依赖关系： targetMap 是一个 WeakMap，存储 target -> key -> dep 的映射关系。 target 通常是一个响应式对象， key 是对象的属性名， dep 是一个 Set，存储依赖该属性的所有 effect。
3. 添加依赖： 将当前的 effect 添加到 dep 中，表示该 effect 依赖这个属性。同时，为了方便清理 effect，还会建立反向引用，让 effect 知道自己依赖了哪些 dep。

第二幕：循环引用的“陷阱”

现在，我们来考虑一下循环引用。假设我们有以下数据结构：

const data = {
  a: 1,
  b: null
};

data.b = data; // 循环引用！
const reactiveData = reactive(data);

const effect = new ReactiveEffect(() => {
  console.log('a changed:', reactiveData.a);
  console.log('b changed:', reactiveData.b.a); // 读取了 reactiveData.b.a，间接引用了 reactiveData.a
});

effect.run();

在这个例子中，data.b 指向了 data 自身，形成了循环引用。如果依赖收集机制没有做好防范，可能会陷入无限循环，导致栈溢出。

第三幕：Vue 的“脱困术”：栈结构与 Set 的妙用

Vue 3 并没有直接使用 递归 进行深度依赖收集，而是巧妙地运用了 栈 结构和 Set 来避免循环引用。

1. 栈结构： Vue 在进行深度依赖收集时，会维护一个栈，用于记录当前正在访问的对象。每当访问一个新对象时，就将其入栈；访问结束后，将其出栈。这样，如果再次访问到栈中的对象，就说明出现了循环引用，可以立即停止递归。
2. Set 结构： 除了栈，Vue 还会使用一个 Set 来记录已经收集过依赖的对象。这样，即使没有直接的循环引用，也能避免重复收集依赖。

咱们来看一段伪代码，感受一下这个过程：

function trackDeep(target, type, key, seen = new Set(), stack = []) {
  // 1. 检查是否已经收集过依赖
  if (seen.has(target)) {
    return; // 避免重复收集
  }

  // 2. 检查是否在栈中，防止循环引用
  if (stack.includes(target)) {
    console.warn('Detected circular dependency!');
    return; // 停止递归
  }

  // 3. 标记为已访问
  seen.add(target);

  // 4. 入栈
  stack.push(target);

  // 5. 收集当前属性的依赖
  track(target, type, key);

  // 6. 递归收集子属性的依赖 (如果子属性也是响应式对象)
  if (typeof target[key] === 'object' && target[key] !== null) {
    for (const childKey in target[key]) {
      trackDeep(target[key], 'get', childKey, seen, stack);
    }
  }

  // 7. 出栈
  stack.pop();
}

// 示例
const data = { a: 1, b: null };
data.b = data; // 循环引用！
const reactiveData = reactive(data);

const effect = new ReactiveEffect(() => {
  console.log('a changed:', reactiveData.a);
  trackDeep(reactiveData, 'get', 'b'); // 手动触发深度依赖收集
  //console.log('b changed:', reactiveData.b.a); // 模拟读取 reactiveData.b.a，间接引用了 reactiveData.a
});

effect.run();

这段伪代码的关键在于：

• seen ： 防止重复收集依赖。
• stack ： 检测循环引用，如果当前 target 已经在 stack 中，说明出现了循环引用，直接返回，避免无限递归。

第四幕：源码中的“蛛丝马迹”

虽然我们无法直接看到 Vue 3 源码中完全一样的代码（因为源码经过了优化和抽象），但核心思想是相同的。你可以在 Vue 3 的 packages/reactivity 目录下，找到相关的依赖收集和触发更新的代码。关键点在于：

1. effectStack: 类似于我们伪代码中的 stack，Vue 3 使用 effectStack 来维护当前正在执行的 effect 栈，用于检测循环依赖。
2. WeakSet 或 Set: 用于存储已经收集过依赖的 target，避免重复收集。

总结：防微杜渐，避免依赖收集的“死循环”

Vue 3 通过栈结构和 Set 集合的巧妙运用，有效地避免了循环引用可能导致的依赖收集死循环。这不仅保证了响应式系统的稳定运行，也提升了性能。

防御机制	实现方式	作用
栈结构	使用 effectStack 维护当前正在执行的 effect 栈。	检测循环引用，当访问到栈中已存在的 target 时，说明存在循环依赖，停止递归。
Set 集合	使用 WeakSet 或 Set 存储已经收集过依赖的 target。	避免重复收集依赖，减少不必要的计算和内存占用。
懒收集	Vue 3 的依赖收集是按需进行的，只有在真正读取响应式数据时才会进行依赖收集。	避免不必要的依赖收集，提高性能。
细粒度更新	Vue 3 的更新是细粒度的，只有真正发生变化的数据才会触发更新。	减少不必要的更新，提高性能。

理解了 Vue 3 的依赖收集机制，以及它如何避免循环引用，你就能更好地理解 Vue 的响应式原理，也能在实际开发中写出更高效、更健壮的代码。

课后作业：

1. 尝试手写一个简化版的响应式系统，包含 reactive 函数和 ReactiveEffect 类，并加入循环引用检测机制。
2. 深入研究 Vue 3 源码中 packages/reactivity 目录下的相关代码，理解 Vue 3 的具体实现方式。

好啦，今天的讲座就到这里。希望大家有所收获！咱们下期再见！