《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'

观察：

cleanupEffect 是否被调用
effect.deps 如何变化
trigger 中 effects 的数量

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

十、面试追问

为什么 effect.deps 是数组而不是 Set？

因为同一个 Dep 可能被多个 key 共享，数组更利于 cleanup。
Vue3 如何避免死循环？

activeEffect 在执行期间不会被重复加入 Dep。
computed 和 effect 的区别？

computed 是懒执行 + 缓存 + 脏检查的 effect。
为什么 cleanup 要在 run 之前？

防止旧依赖污染新依赖，避免内存泄漏。

十一、本篇总结

✅ effect 不是函数，而是对象

✅ effectStack 解决嵌套执行问题

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

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

✅ scheduler 是性能优化的入口

一句话升华：

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

十二、下一篇预告

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