Vue 3 依赖追踪：一场关于 dep 的深度解剖（附赠 WeakMap 与 Set 的爱恨情仇）
大家好，我是你们今天的源码导游，人称“变量观察家”。今天，我们不聊八卦，只聊 Vue 3 源码里一个非常核心，但又经常被忽略的概念：dep。 简单来说，dep 就是 Vue 3 响应式系统的神经中枢，它负责收集依赖，并在数据变化时通知相关的所有“观察者”。
如果你觉得 “依赖”、“观察者” 这些词听起来有点抽象，别担心，等下我会用非常接地气的方式，帮你彻底搞懂它们。
1. dep 的精确定义：你以为它只是个 Set？
首先，我们要明确一点：dep 不仅仅是一个 Set。 虽然在 Vue 3 的实现中，dep 内部确实使用了一个 Set 来存储依赖（也就是 effect 函数），但 dep 本身还肩负着其他重要的职责。
让我们先来看一下 dep 的简化版代码骨架：
// 简化版 dep
class Dep {
subs: Set<ReactiveEffect> = new Set(); // 存储 effect 的 Set
active = true; // 用于控制是否收集依赖
constructor() {
this.subs = new Set();
}
depend() {
if (activeEffect) { // activeEffect 是当前激活的 effect
this.subs.add(activeEffect);
activeEffect.deps.push(this); // 反向收集，方便清除 effect
}
}
notify() {
// 创建一个副本，防止在迭代过程中修改 subs
const effects = [...this.subs];
for (const effect of effects) {
effect.run(); // 触发 effect 的执行
}
}
}从上面的代码中我们可以看到，dep 主要做了以下几件事：
- 存储依赖（
subs: Set<ReactiveEffect>）: 这是dep最核心的功能，它使用Set来存储所有依赖于当前响应式数据的effect函数。 使用Set的好处是，它可以自动去重，保证同一个effect函数不会被重复执行。 depend()方法: 这个方法负责收集依赖。 当我们访问一个响应式数据时，depend()方法会被调用，它会将当前激活的effect函数 (activeEffect) 添加到subs中。notify()方法: 当响应式数据发生变化时，notify()方法会被调用，它会遍历subs中的所有effect函数，并依次执行它们。
所以，dep 不仅仅是一个 Set，它还是一个依赖管理器，负责收集、存储和触发依赖。
2. WeakMap 的登场：建立响应式对象与 dep 之间的桥梁
现在，我们已经知道了 dep 的作用，但是，dep 是如何与响应式对象关联起来的呢？ 这就要用到 WeakMap 了。
在 Vue 3 中，每一个响应式对象都会有一个与之对应的 dep 实例。 这个对应关系就是通过 WeakMap 来建立的。
我们来看一下 WeakMap 的用法：
const targetMap = new WeakMap<object, Map<string | symbol, Dep>>();
// 假设 target 是一个响应式对象，key 是对象的属性名
function getDep(target: object, key: string | symbol): Dep {
let depsMap = targetMap.get(target);
if (!depsMap) {
depsMap = new Map();
targetMap.set(target, depsMap);
}
let dep = depsMap.get(key);
if (!dep) {
dep = new Dep();
depsMap.set(key, dep);
}
return dep;
}这段代码做了以下几件事：
- 创建
targetMap:targetMap是一个WeakMap，它的key是响应式对象，value是一个Map。 - 创建
depsMap:depsMap是一个Map，它的key是响应式对象的属性名，value是一个dep实例。 getDep()函数: 这个函数负责获取与响应式对象及其属性对应的dep实例。 如果dep实例不存在，则创建一个新的dep实例，并将其存储到depsMap中。
通过 WeakMap，我们可以为每一个响应式对象的每一个属性创建一个对应的 dep 实例。 当我们访问或修改一个响应式对象的属性时，我们就可以通过 WeakMap 快速找到与之对应的 dep 实例，并进行依赖收集或触发依赖。
为什么使用 WeakMap？
WeakMap 的一个非常重要的特性是，它对 key 的引用是弱引用。 这意味着，如果一个响应式对象不再被使用，那么 WeakMap 中与之对应的 key 就会被垃圾回收器回收，从而避免内存泄漏。
如果没有使用 WeakMap，而是使用了普通的 Map，那么即使一个响应式对象不再被使用，它仍然会被 Map 引用，导致内存泄漏。
3. Set 的作用：去重与高效的依赖管理
我们已经知道，dep 内部使用了一个 Set 来存储依赖。 那么，为什么使用 Set 而不是数组呢？
Set 的一个最主要的优点是，它可以自动去重。 这意味着，即使同一个 effect 函数被多次添加到 dep 中，Set 中也只会存储一个副本。
这在以下情况下非常有用：
- 重复访问响应式数据: 如果一个
effect函数多次访问同一个响应式数据，那么depend()方法会被多次调用，但Set会自动去重，保证effect函数只会被添加到dep中一次。 - 嵌套的响应式数据: 如果一个响应式数据依赖于另一个响应式数据，那么当第一个响应式数据发生变化时，可能会触发多个
effect函数的执行。 使用Set可以避免这些effect函数被重复执行。
除了去重之外，Set 还具有高效的查找性能。 这使得 dep 可以快速判断一个 effect 函数是否已经存在于 subs 中。
4. activeEffect：当前激活的 effect 函数
在 dep 的 depend() 方法中，我们看到了一个 activeEffect 变量。 那么，activeEffect 是什么呢？
activeEffect 是一个全局变量，它指向当前正在执行的 effect 函数。 当我们执行一个 effect 函数时，我们会将该 effect 函数赋值给 activeEffect。 然后，当我们访问响应式数据时，depend() 方法就可以通过 activeEffect 找到当前正在执行的 effect 函数，并将其添加到 dep 中。
// 定义 activeEffect
export let activeEffect: ReactiveEffect | undefined
export class ReactiveEffect<T = any> {
active = true // 这个 effect 是否是激活状态
deps: Dep[] = [] // 存储依赖的 dep
onStop?: () => void // stop 的回调
constructor(
public fn: () => T,
public scheduler: EffectScheduler | null = null,
scope?: EffectScope
) {
recordEffectScope(this, scope)
}
run() {
if (!this.active) {
return this.fn()
}
try {
activeEffect = this
enableTracking()
return this.fn()
} finally {
if (this.deps.length) {
cleanupEffect(this)
}
activeEffect = undefined
resetTracking()
}
}
}我们可以看到，在 ReactiveEffect 的 run 方法中，首先将 activeEffect 设置为当前 effect 实例，然后在 finally 块中将 activeEffect 重置为 undefined。
为什么要使用 activeEffect？
activeEffect 的作用是，将 effect 函数的执行上下文与响应式数据的访问关联起来。 只有在 activeEffect 存在的情况下，depend() 方法才能正确地收集依赖。
5. 反向依赖收集：effect.deps 的作用
除了 dep 维护一个 effect 集合，effect 自身也会维护一个 dep 集合 effect.deps。 这样做的好处是什么呢？
在 ReactiveEffect 类的定义中，我们可以看到 deps 属性：
export class ReactiveEffect<T = any> {
active = true // 这个 effect 是否是激活状态
deps: Dep[] = [] // 存储依赖的 dep
onStop?: () => void // stop 的回调
constructor(
public fn: () => T,
public scheduler: EffectScheduler | null = null,
scope?: EffectScope
) {
recordEffectScope(this, scope)
}
run() {
if (!this.active) {
return this.fn()
}
try {
activeEffect = this
enableTracking()
return this.fn()
} finally {
if (this.deps.length) {
cleanupEffect(this)
}
activeEffect = undefined
resetTracking()
}
}
}在 dep.depend() 方法中，我们可以看到以下代码：
depend() {
if (activeEffect) { // activeEffect 是当前激活的 effect
this.subs.add(activeEffect);
activeEffect.deps.push(this); // 反向收集，方便清除 effect
}
}activeEffect.deps.push(this) 这行代码的作用是，将当前的 dep 实例添加到 activeEffect 的 deps 数组中。 这样，每一个 effect 函数都知道自己依赖于哪些 dep 实例。
反向依赖收集的作用是，方便清除 effect 函数的依赖。
当一个 effect 函数不再需要执行时（例如，组件被卸载时），我们需要清除它所依赖的所有 dep 实例。 如果没有反向依赖收集，我们需要遍历所有的 dep 实例，找到包含该 effect 函数的 dep 实例，并将其从 subs 中移除。 这样做效率非常低。
有了反向依赖收集，我们只需要遍历 effect.deps 数组，将该 effect 函数从每一个 dep 实例的 subs 中移除即可。 这样做效率更高。
在 ReactiveEffect 的 run 方法中，我们可以看到以下代码：
run() {
if (!this.active) {
return this.fn()
}
try {
activeEffect = this
enableTracking()
return this.fn()
} finally {
if (this.deps.length) {
cleanupEffect(this)
}
activeEffect = undefined
resetTracking()
}
}cleanupEffect(this) 方法的作用是，清除当前 effect 函数的依赖。 它的实现如下：
function cleanupEffect(effect: ReactiveEffect) {
const { deps } = effect
if (deps.length) {
for (let i = 0; i < deps.length; i++) {
deps[i].delete(effect)
}
deps.length = 0
}
}这段代码遍历 effect.deps 数组，将 effect 函数从每一个 dep 实例的 subs 中移除，并将 effect.deps 数组清空。
6. 总结：dep、WeakMap、Set 的完美配合
现在，让我们来总结一下 dep、WeakMap 和 Set 在 Vue 3 响应式系统中的作用：
| 数据结构 | 作用 |
|---|---|
dep |
依赖管理器，负责收集、存储和触发依赖。 内部使用 Set 存储依赖。 |
WeakMap |
建立响应式对象与 dep 实例之间的对应关系。 使用 WeakMap 可以避免内存泄漏。 |
Set |
存储 effect 函数，并自动去重。 提供高效的查找性能。 |
它们之间的关系可以用一张图来表示：
响应式对象 (target)
|
| 通过 WeakMap 关联
V
Map<属性名, dep> (depsMap)
|
| 获取指定属性的 dep
V
dep
|
| 使用 Set 存储
V
Set<ReactiveEffect> (subs)
|
| 存储依赖于该 dep 的 effect 函数
V
ReactiveEffect (effect)
|
| 维护反向依赖
V
deps: Dep[] (effect.deps)总而言之，dep 是 Vue 3 响应式系统的核心数据结构之一，它与 WeakMap 和 Set 紧密配合，实现了高效的依赖追踪和管理。
7. 深入思考：dep 的优化空间
虽然 Vue 3 的 dep 已经非常高效，但仍然存在一些优化空间。 例如：
- 更细粒度的依赖追踪: 目前，Vue 3 的依赖追踪是基于组件的。 如果一个组件的某个属性发生了变化，那么整个组件都会被重新渲染。 如果能够实现更细粒度的依赖追踪，只重新渲染组件中依赖于该属性的部分，那么可以进一步提高性能。
- 编译时优化: Vue 3 的依赖追踪是在运行时进行的。 如果能够在编译时进行一些优化，例如，静态分析代码，确定哪些变量是响应式的，哪些变量不是响应式的，那么可以减少运行时的开销。
8. 结语：源码的世界，其乐无穷
好了，今天的 dep 源码之旅就到这里了。 希望通过今天的讲解，你对 Vue 3 的响应式系统有了更深入的了解。
源码的世界是充满乐趣的，只要你肯花时间去学习、去探索，你一定能发现其中的奥秘。 记住，不要害怕阅读源码，源码是最好的老师。
下次有机会，我们再一起探索 Vue 3 源码的其他精彩部分。 谢谢大家！