深入分析 Vue 3 源码中 `ReactiveEffect` 类如何利用 `WeakMap` 和 `Set` 数据结构高效地管理依赖关系图。

各位朋友，大家好！我是今天的主讲人，很高兴能和大家一起深入 Vue 3 的源码，聊聊 ReactiveEffect 这个核心类是如何巧妙地利用 WeakMap 和 Set 来构建和维护响应式依赖图谱的。

在 Vue 的响应式系统中，ReactiveEffect 扮演着至关重要的角色，它负责追踪响应式数据变化，并在依赖数据发生改变时，触发相应的更新。 而高效的管理这些依赖关系，是保证 Vue 响应式系统性能的关键。 那么，WeakMap 和 Set 这两个数据结构，是如何帮助 ReactiveEffect 实现这一目标的呢？ 让我们一起揭开这层神秘的面纱。

一、 响应式依赖图谱：数据和副作用的羁绊

要理解 WeakMap 和 Set 的作用，首先我们要弄清楚什么是响应式依赖图谱。 简单来说，它就像一张错综复杂的网络，连接着响应式数据和副作用函数（effect）。

• 响应式数据（Reactive Data）： 这些是被 reactive()、ref() 等 API 处理过的数据，它们拥有被追踪的能力，任何对它们的访问都会被记录下来。

• 副作用函数（Effect）： 这些是需要响应数据变化而执行的函数，例如渲染函数、计算属性的 getter 等。

当一个副作用函数在执行过程中访问了某个响应式数据，那么它们之间就建立了一种依赖关系。 当这个响应式数据发生改变时，所有依赖它的副作用函数都需要重新执行，以保持视图或状态的同步。

例如， 假设我们有以下代码：

const count = ref(0);

effect(() => {
  console.log("Count is:", count.value);
});

在这个例子中，count 是一个响应式数据，而 console.log("Count is:", count.value) 是一个副作用函数。 当副作用函数执行时，它访问了 count.value，因此它们之间建立了一个依赖关系。 当 count.value 的值发生改变时，console.log 语句会被重新执行。

二、ReactiveEffect： 依赖追踪的核心

ReactiveEffect 类就是用来封装和管理这些副作用函数的。 它的主要职责包括：

1. 收集依赖： 当副作用函数执行时，追踪所有被访问的响应式数据。
2. 建立连接： 将副作用函数和它所依赖的响应式数据关联起来。
3. 触发更新： 当响应式数据发生改变时，通知所有依赖它的副作用函数重新执行。

下面是 ReactiveEffect 类的一个简化版本：

class ReactiveEffect {
  constructor(fn, scheduler = null) {
    this.fn = fn; // 副作用函数
    this.scheduler = scheduler; // 调度器，用于控制更新时机
    this.deps = []; // 存储所有依赖的 Set<ReactiveEffect>
    this.active = true; // 标记 effect 是否激活
  }

  run() {
    if (!this.active) {
      return this.fn(); // 非激活状态，直接执行
    }

    activeEffect = this; // 将当前 effect 设置为全局激活的 effect
    cleanupEffect(this); // 清理之前的依赖
    const result = this.fn(); // 执行副作用函数，触发依赖收集
    activeEffect = null; // 清空全局激活的 effect
    return result;
  }

  stop() {
    if (this.active) {
      cleanupEffect(this); // 清理所有依赖
      this.active = false; // 标记为非激活
    }
  }
}

let activeEffect = null; // 当前激活的 effect

function cleanupEffect(effect) {
  const { deps } = effect;
  if (deps.length) {
    for (let i = 0; i < deps.length; i++) {
      deps[i].delete(effect); // 从依赖集合中移除 effect
    }
    deps.length = 0; // 清空依赖数组
  }
}

这段代码展示了 ReactiveEffect 的基本结构和 run 方法， run 方法负责执行副作用函数，并进行依赖追踪。 cleanupEffect 方法用于清理 effect 之前的依赖，防止冗余更新。

三、WeakMap 和 Set： 依赖管理的黄金搭档

现在，我们来看看 WeakMap 和 Set 是如何在依赖管理中发挥作用的。 Vue 3 使用了一个嵌套的 WeakMap 和 Set 结构来存储依赖关系：

// targetMap: WeakMap<object, Map<string | symbol, Set<ReactiveEffect>>>
// target -> key -> dep

const targetMap = new WeakMap();

这个 targetMap 的结构可以这样理解：

• WeakMap<object, Map<string | symbol, Set<ReactiveEffect>>>: 最外层的 WeakMap，以响应式对象（target）为键，值为一个 Map。
• Map<string | symbol, Set<ReactiveEffect>>: 第二层 Map，以响应式对象的属性名（key）为键，值为一个 Set。
• Set<ReactiveEffect>: 最内层的 Set，存储着所有依赖该属性的 ReactiveEffect 实例。

用一张表格来总结一下：

数据结构	键 (Key)	值 (Value)	作用
WeakMap	响应式对象 (target)	Map<string | symbol, Set<ReactiveEffect>>	存储所有响应式对象及其对应的属性依赖关系
Map	属性名 (key)	Set<ReactiveEffect>	存储特定属性的所有依赖的 ReactiveEffect 实例
Set	ReactiveEffect	无	存储依赖该属性的 ReactiveEffect 实例，确保唯一性，避免重复触发更新。

3.1 WeakMap 的妙用： 自动垃圾回收

为什么要使用 WeakMap 而不是普通的 Map 呢？ 关键在于 WeakMap 的键是弱引用。

• 弱引用： 当一个对象只被 WeakMap 的键引用时，垃圾回收器可以回收该对象，而不会阻止它被回收。

这意味着，当一个响应式对象不再被其他地方引用时，即使它还在 targetMap 中作为键存在，垃圾回收器也可以将其回收。 相应的，WeakMap 中对应的键值对也会被自动移除，从而避免了内存泄漏。

这对于 Vue 这种需要频繁创建和销毁组件的应用来说至关重要。 如果使用普通的 Map，当组件销毁时，其对应的响应式对象可能仍然被 Map 引用，导致无法被垃圾回收，最终造成内存泄漏。

3.2 Set 的威力： 保证依赖的唯一性

为什么要使用 Set 来存储 ReactiveEffect 实例呢？ 因为 Set 可以保证元素的唯一性。

• 唯一性： Set 中不允许存在重复的元素。

这意味着，即使同一个副作用函数多次依赖同一个响应式对象的同一个属性，Set 中也只会存储一个 ReactiveEffect 实例。 这样可以避免重复触发更新，提高性能。

例如，考虑以下场景：

const count = ref(0);

effect(() => {
  console.log("Count is:", count.value);
  console.log("Count is:", count.value); // 两次访问 count.value
});

在这个例子中，副作用函数两次访问了 count.value。 如果使用数组来存储依赖，那么 ReactiveEffect 实例会被添加两次，导致 count 变化时，console.log 语句会被执行两次。

而使用 Set，ReactiveEffect 实例只会被添加一次，确保 console.log 语句只会被执行一次。

四、 依赖收集和触发更新的流程

现在，让我们结合 WeakMap 和 Set，来看看依赖收集和触发更新的完整流程。

4.1 依赖收集

当一个副作用函数执行时（通过 ReactiveEffect.run()），Vue 会执行以下步骤：

1. 设置全局激活的 effect： 将当前 ReactiveEffect 实例设置为全局激活的 activeEffect。
2. 执行副作用函数： 执行副作用函数，触发响应式数据的 get 拦截器。
3. 在 get 拦截器中收集依赖：
   • 从 targetMap 中获取当前响应式对象对应的 Map。 如果不存在，则创建一个新的 Map。
   • 从 Map 中获取当前属性对应的 Set。 如果不存在，则创建一个新的 Set。
   • 将当前激活的 activeEffect 添加到 Set 中。
   • 将 Set 添加到 ReactiveEffect 实例的 deps 数组中，方便后续清理。
4. 清空全局激活的 effect： 将 activeEffect 设置为 null。

下面是 track 函数的简化版本，它负责在 get 拦截器中收集依赖：

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }

    let dep = depsMap.get(key);
    if (!dep) {
      dep = new Set();
      depsMap.set(key, dep);
    }

    trackEffects(dep);
  }
}

function trackEffects(dep) {
  if (activeEffect) {
    dep.add(activeEffect);
    activeEffect.deps.push(dep);
  }
}

4.2 触发更新

当一个响应式数据发生改变时（通过 set 拦截器），Vue 会执行以下步骤：

1. 从 targetMap 中获取依赖： 从 targetMap 中获取当前响应式对象对应的 Map。
2. 获取所有相关的 effect： 从 Map 中获取当前属性对应的 Set。
3. 执行所有 effect： 遍历 Set 中的所有 ReactiveEffect 实例，并执行它们的 run 方法。 如果 ReactiveEffect 实例定义了 scheduler，则使用 scheduler 进行调度，否则直接执行 run 方法。

下面是 trigger 函数的简化版本，它负责在 set 拦截器中触发更新：

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return;
  }

  let dep = depsMap.get(key);

  if (dep) {
    triggerEffects(dep);
  }
}

function triggerEffects(dep) {
  const effects = [...dep]; // 创建一个浅拷贝，避免在迭代过程中修改 Set
  for (const effect of effects) {
    if (effect.scheduler) {
      effect.scheduler(); // 使用调度器
    } else {
      effect.run(); // 直接执行
    }
  }
}

五、总结：WeakMap 和 Set 的价值

通过使用 WeakMap 和 Set，Vue 3 的响应式系统实现了高效的依赖管理：

• WeakMap 实现了自动垃圾回收，避免内存泄漏。
• Set 保证了依赖的唯一性，避免重复触发更新。

这种巧妙的设计，使得 Vue 3 的响应式系统在性能和内存占用方面都表现出色，为构建大型复杂应用提供了坚实的基础。

希望今天的分享能帮助大家更好地理解 Vue 3 响应式系统的底层原理。 谢谢大家！