各位观众，大家好！我是今天的“Vue 3 源码解密”主讲人，咱们今天就来聊聊 Vue 3 响应式系统的核心——ReactiveEffect 类，以及它如何巧妙地利用 WeakMap 和 Set 这两大金刚来管理依赖关系图，让数据变化时能够精准地通知到相关的视图更新。
准备好了吗？ Let’s go！
一、 依赖追踪：Vue 3 响应式系统的骨架
Vue 的响应式系统，说白了，就是建立一个数据和使用这些数据的视图之间的“恋爱关系”。当数据（比如 data 里的变量）发生变化时，我们要能迅速找到所有“爱慕”这个数据的视图，然后通知它们更新。
ReactiveEffect 类就是这段恋爱关系的核心维护者。它代表一个需要响应式追踪的副作用函数，通常就是更新视图的渲染函数。
二、targetMap：依赖关系的大本营
要维护数据和视图之间的关系，Vue 3 使用了一个名为 targetMap 的 WeakMap。 别被 WeakMap 吓到，它其实很简单。
targetMap 的结构是这样的：
// targetMap: WeakMap<object, Map<string | symbol, Set<ReactiveEffect>>>
const targetMap = new WeakMap<object, Map<string | symbol, Set<ReactiveEffect>>>()拆解一下：
-
WeakMap:WeakMap的 key 必须是对象。在这里，targetMap的 key 是响应式对象（例如，data里的对象）。使用WeakMap的好处是，当响应式对象不再被引用时，垃圾回收机制会自动回收它，避免内存泄漏。Vue 3 真是个贴心的小棉袄。 -
Map<string | symbol, Set<ReactiveEffect>>:WeakMap的 value 是一个Map。这个Map的 key 是响应式对象的属性名（字符串或 Symbol），value 是一个Set。 -
Set<ReactiveEffect>:Map的 value 是一个Set。这个Set存储的是所有依赖于该属性的ReactiveEffect实例。Set的好处是它可以自动去重，避免同一个ReactiveEffect被多次执行。
用表格来总结一下：
| 数据结构 | Key | Value | 作用 |
|---|---|---|---|
| WeakMap | 响应式对象 (target) | Map<string | symbol, Set> | 存储所有响应式对象的依赖关系。当响应式对象不再被引用时，会被垃圾回收，防止内存泄漏。 |
| Map | 响应式对象的属性名 (key) | Set | 存储依赖于特定属性的所有 ReactiveEffect 实例。 |
| Set | ReactiveEffect 实例 (effect) | 无 (Set 自动去重) | 存储所有依赖于特定属性的 ReactiveEffect 实例，并自动去重。 |
举个栗子：
假设我们有以下代码：
<template>
<div>{{ message }}</div>
<div>{{ count }}</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Hello Vue 3!')
const count = ref(0)
setInterval(() => {
count.value++
}, 1000)
</script>在这个例子中，message 和 count 都是响应式数据。当 Vue 组件渲染时，会读取 message 和 count 的值。 此时 targetMap 可能会是这样的：
targetMap = {
// 响应式对象 (ref 包装后的对象)
RefImpl { value: "Hello Vue 3!" }: {
// 属性名 "value"
"value": Set {
// 渲染函数的 ReactiveEffect 实例
ReactiveEffect { ... }
}
},
RefImpl { value: 0 }: {
// 属性名 "value"
"value": Set {
// 渲染函数的 ReactiveEffect 实例
ReactiveEffect { ... }
}
}
}当 count.value 发生变化时，Vue 3 就能通过 targetMap 迅速找到依赖于 count.value 的 ReactiveEffect 实例，然后执行这些 ReactiveEffect，从而更新视图。
三、dep：ReactiveEffect 的“朋友圈”
每个 ReactiveEffect 实例都有一个 deps 属性，它是一个 Set<Dep>，存储了该 ReactiveEffect 实例所依赖的所有 Dep 实例。Dep 本质上也是一个 Set<ReactiveEffect>，它存储了所有依赖于某个响应式属性的 ReactiveEffect 实例。
// ReactiveEffect 类
class ReactiveEffect<T = any> {
active = true
deps: Dep[] = [] // Dep 就是 Set<ReactiveEffect> 的别名
options: ReactiveEffectOptions
onStop?: () => void
constructor(
public fn: () => T,
scheduler?: EffectScheduler | null,
scope?: EffectScope | null
) {
this.scheduler = scheduler
this.scope = scope
recordEffectScope(this, scope)
}
// ...
}
type Dep = Set<ReactiveEffect>简单来说，dep 就是 ReactiveEffect 的“朋友圈”，记录了 ReactiveEffect 依赖了哪些响应式属性。
为什么要用 deps？
使用 deps 的目的是为了在 ReactiveEffect 被移除时，能够方便地清理依赖关系。当 ReactiveEffect 停止追踪时，我们需要将它从所有它依赖的 Dep 中移除，否则会导致内存泄漏。
四、依赖收集：track 函数的妙用
依赖关系是如何建立的呢？ 这就要靠 track 函数了。
track 函数的简化版代码如下：
// 简化版 track 函数
function track(target: object, type: TrackOpTypes, key: string | symbol) {
if (!isTracking()) {
return
}
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) // 核心逻辑
}拆解一下：
-
isTracking(): 首先判断是否需要进行依赖追踪。只有在ReactiveEffect激活状态下，才需要进行依赖追踪。 -
targetMap.get(target): 从targetMap中获取当前响应式对象对应的Map。如果不存在，则创建一个新的Map并添加到targetMap中。 -
depsMap.get(key): 从Map中获取当前属性名对应的Set。如果不存在，则创建一个新的Set并添加到Map中。 -
trackEffects(dep): 核心逻辑。将当前激活的ReactiveEffect添加到Set中。
trackEffects 函数的简化版代码如下：
// 简化版 trackEffects 函数
function trackEffects(dep: Dep) {
if (activeEffect) { // activeEffect 指向当前激活的 ReactiveEffect 实例
dep.add(activeEffect)
activeEffect.deps.push(dep) // 将 dep 添加到 activeEffect 的 deps 数组中
}
}这个函数做了两件事：
dep.add(activeEffect): 将当前激活的ReactiveEffect添加到Dep中。activeEffect.deps.push(dep): 将Dep添加到当前激活的ReactiveEffect的deps数组中。
五、触发更新：trigger 函数的魔力
当响应式数据发生变化时，我们需要触发更新。 这就要靠 trigger 函数了。
trigger 函数的简化版代码如下：
// 简化版 trigger 函数
function trigger(target: object, type: TriggerOpTypes, key: string | symbol, newValue?: any, oldValue?: any) {
const depsMap = targetMap.get(target)
if (!depsMap) {
return
}
let deps: (Dep | undefined)[] = []
deps.push(depsMap.get(key))
const effects: ReactiveEffect[] = []
for (const dep of deps) {
if (dep) {
effects.push(...dep)
}
}
triggerEffects(createDep(effects))
}拆解一下：
-
targetMap.get(target): 从targetMap中获取当前响应式对象对应的Map。如果不存在，则说明没有依赖该对象的ReactiveEffect，直接返回。 -
depsMap.get(key): 从Map中获取当前属性名对应的Set。 -
triggerEffects(createDep(effects)): 核心逻辑。执行所有依赖于该属性的ReactiveEffect。
triggerEffects 函数的简化版代码如下：
// 简化版 triggerEffects 函数
function triggerEffects(dep: Dep) {
const effects = [...dep]
for (const effect of effects) {
if (effect.scheduler) {
effect.scheduler() // 如果有 scheduler，则执行 scheduler
} else {
effect.run() // 否则直接执行 effect
}
}
}这个函数做了两件事：
effect.scheduler(): 如果ReactiveEffect实例有scheduler，则执行scheduler。scheduler允许我们自定义更新策略，例如，使用queueMicrotask将更新任务放入微任务队列，从而实现异步更新。effect.run(): 如果ReactiveEffect实例没有scheduler，则直接执行effect。effect.run()会执行ReactiveEffect实例的fn，也就是渲染函数。
六、清理依赖：stop 函数的救赎
当组件卸载或者 ReactiveEffect 不再需要时，我们需要清理依赖关系，避免内存泄漏。 这就要靠 stop 函数了。
stop 函数的简化版代码如下：
// 简化版 stop 函数
function stop(effect: ReactiveEffect) {
if (effect.active) {
cleanupEffect(effect)
if (effect.onStop) {
effect.onStop()
}
effect.active = false
}
}拆解一下：
cleanupEffect(effect): 核心逻辑。清理ReactiveEffect的依赖关系。effect.onStop(): 如果ReactiveEffect实例有onStop回调函数，则执行onStop回调函数。effect.active = false: 将ReactiveEffect实例的active属性设置为false，表示该ReactiveEffect实例不再激活。
cleanupEffect 函数的简化版代码如下：
// 简化版 cleanupEffect 函数
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
}
}这个函数遍历 ReactiveEffect 实例的 deps 数组，将 ReactiveEffect 实例从所有它依赖的 Dep 中移除。
七、总结：WeakMap + Set = 高效依赖管理
通过 WeakMap 和 Set 的巧妙组合，Vue 3 的响应式系统实现了高效的依赖管理：
WeakMap存储响应式对象和属性的依赖关系，避免内存泄漏。Set存储依赖于特定属性的ReactiveEffect实例，并自动去重。track函数负责收集依赖关系，trigger函数负责触发更新，stop函数负责清理依赖关系。
这种设计使得 Vue 3 能够精准地追踪数据变化，并高效地通知到相关的视图更新，从而实现高性能的响应式系统。
好啦，今天的 Vue 3 源码解密就到这里。 希望大家通过今天的学习，对 Vue 3 的响应式系统有了更深入的了解。 感谢大家的观看！ 咱们下期再见！