《Vue3 从入门到大神35篇》Vue3 源码详解（五）：effect 依赖收集原理——track 与 trigger 是如何工作的？

本篇关键词：effect、effectStack、Dep、cleanup、依赖清理、嵌套 effect、调度雏形

难度等级：⭐⭐⭐⭐⭐

工程价值：这是整个 Vue3 响应式系统的“心脏”。读懂这一篇，你不仅能彻底理解 computed、watch、组件更新的本质，还能从根本上规避“依赖残留”“无限循环”等高级 Bug。

一、开篇：为什么 effect 是响应式的灵魂？

在 Vue3 中，一切副作用都源于 effect：

• computed → 特殊的 effect

• watch / watchEffect → 包装后的 effect

• 组件渲染 → 一个巨大的 componentEffect

👉 一句话定义：

effect 是“可被重新执行的副作用函数”，是数据与视图之间的桥梁。

二、回顾：依赖收集的三角关系

我们在第三篇手写过这个结构：

target → key → dep → effect

但在 Vue3 源码中，这个关系更加严谨：

WeakMap<target, Map<key, Dep>>
Dep = Set<ReactiveEffect>

而 effect 本身，并不只是一个函数，而是一个对象。

三、ReactiveEffect：effect 的真实身份

在 packages/reactivity/src/effect.ts 中，核心类是：

class ReactiveEffect<T = any> {
active = true
deps: Dep[] = [] // 记录我依赖了哪些 Dep
parent: ReactiveEffect | null = null

constructor(
public fn: () => T,
public scheduler?: EffectScheduler
) {}

run() {
// 核心逻辑
}
}

为什么 deps 是一个数组？

因为一个 effect 可能依赖多个响应式属性：

effect(() => {
console.log(state.a + state.b)
})

👉 deps 同时包含 a 和 b 对应的 Dep。

四、effectStack：解决嵌套 effect 的关键

1️⃣ 为什么会有嵌套 effect？

effect(() => {
console.log('parent')
effect(() => {
console.log('child')
})
})

Vue 组件渲染本身就是一个嵌套结构：

App.vue
├─ CompA.vue
│ └─ CompB.vue

每一层渲染，都是一个 effect。

2️⃣ effectStack 的实现

let activeEffect: ReactiveEffect | null = null
const effectStack: ReactiveEffect[] = []

class ReactiveEffect {
run() {
if (!this.active) return this.fn()

if (!effectStack.includes(this)) {
try {
effectStack.push((activeEffect = this))
return this.fn()
} finally {
effectStack.pop()
activeEffect = effectStack[effectStack.length – 1] || null
}
}
}
}

✅ 关键点：

• activeEffect 永远指向“当前正在执行的 effect”

• finally 确保即使报错也能恢复栈

👉 这就是 Vue3 能正确处理嵌套渲染的根本原因。

五、track：依赖收集的完整流程

1️⃣ track 的触发时机

// reactive get 拦截中
get(target, key) {
track(target, TrackOpTypes.GET, key)
return Reflect.get(…)
}

2️⃣ track 源码精读

export function track(target: object, type: TrackOpTypes, key: unknown) {
if (!activeEffect) return

let depsMap = targetMap.get(target)
if (!depsMap) {
targetMap.set(target, (depsMap = new Map()))
}

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

if (!dep.has(activeEffect)) {
dep.add(activeEffect)
activeEffect.deps.push(dep)
}
}

重点拆解

✅ 双向记录：

• Dep 记录 effect

• effect.deps 记录 Dep

为什么要双向记录？

👉 为了后续清理依赖。

六、trigger：依赖触发的完整流程

1️⃣ trigger 的触发时机

set(target, key, value) {
trigger(target, TriggerOpTypes.SET, key)
return Reflect.set(…)
}

2️⃣ trigger 源码精读（简化版）

export function trigger(target: object, type: TriggerOpTypes, key: unknown) {
const depsMap = targetMap.get(target)
if (!depsMap) return

const effects = new Set<ReactiveEffect>()
const add = (effectsToAdd?: Dep) => {
effectsToAdd?.forEach(effect => effects.add(effect))
}

add(depsMap.get(key))

effects.forEach(effect => {
if (effect.scheduler) {
effect.scheduler()
} else {
effect.run()
}
})
}

✅ 核心逻辑：

• 找到 key 对应的所有 effect

• 如果有 scheduler → 交给调度器

• 否则 → 立即执行

👉 这就是 computed、watch、组件更新的统一入口。

七、依赖清理（cleanup）：Vue3 相比 Vue2 的巨大进步

1️⃣ Vue2 的经典 Bug

if (state.show) {
console.log(state.msg)
}

当 state.show 从 true → false：

• Vue2：仍然会收集 state.msg 的依赖

• 造成依赖残留

2️⃣ Vue3 的解决方案：cleanupEffect

function cleanupEffect(effect: ReactiveEffect) {
const { deps } = effect
for (let i = 0; i < deps.length; i++) {
deps[i].delete(effect)
}
effect.deps.length = 0
}

在 effect.run() 之前调用：

run() {
cleanupEffect(this)
effectStack.push((activeEffect = this))
try {
return this.fn()
} finally {
effectStack.pop()
activeEffect = effectStack[effectStack.length – 1] || null
}
}

✅ 效果：

• 每次执行前，清空旧依赖

• 执行后，重新收集新依赖

• 完美适配 if / switch / 三元表达式

👉 这是 Vue3 响应式系统“自愈能力”的来源。

八、调度器雏形：为什么 Vue3 不会频繁更新？

1️⃣ 问题场景

state.count++
state.count++
state.count++

你不希望触发三次更新。

2️⃣ scheduler 的作用

class ReactiveEffect {
constructor(
public fn: () => T,
public scheduler?: EffectScheduler
) {}
}

run() {
if (this.scheduler) {
this.scheduler(this)
} else {
this.fn()
}
}

👉 组件渲染 effect 的 scheduler：

• 将更新推入微任务队列

• 合并多次更新

• 实现 nextTick

（下一篇讲 watch / computed 时会深入）

九、调试实战：用断点验证全流程

在 VSCode 中，依次在这些位置打断点：

packages/reactivity/src/effect.ts
├── ReactiveEffect.run()
├── track()
├── trigger()
└── cleanupEffect()

然后运行：

const state = reactive({ ok: true, text: 'hello' })

effect(() => {
console.log(state.ok ? state.text : 'no')
})

state.ok = false
state.text = 'world'

观察：

👉 你会发现：Vue3 的依赖系统是“动态重构”的。

十、面试追问

十一、本篇总结

✅ effect 不是函数，而是对象

✅ effectStack 解决嵌套执行问题

✅ track 双向记录，为 cleanup 做准备

✅ cleanupEffect 是 Vue3 响应式“自愈”的关键

✅ scheduler 是性能优化的入口

一句话升华：

Vue3 的响应式系统，不是“收集一次依赖就结束”，而是每一次执行都是一次依赖的重建。

十二、下一篇预告

👉 《Vue3 源码详解（六）：computed 源码分析——懒计算与缓存机制的实现》