patch阶段不负责依赖追踪,计算属性的依赖收集发生在getter执行时:首次访问或依赖变更后重新求值,读取响应式数据触发getter,自动将当前watcher加入其dep列表,该过程与patch完全解耦。

Patch 阶段本身不负责重新追踪计算属性的依赖。这是常见误解——patch(即虚拟 DOM 的比对与更新)只处理已生成的 VNode 树,它不介入响应式系统的依赖收集过程。
计算属性的依赖追踪发生在求值时,而非 patch 时
计算属性的依赖关系是在其 getter 执行过程中自动建立的:
- 首次访问或依赖变更后再次求值时,Vue 进入依赖收集模式;
- 此时读取任何响应式数据(如
props.count、state.list、ref.value)都会触发对应 getter,将当前计算属性的 Watcher 添加到该数据的依赖列表中; - 这个过程与 patch 完全解耦,发生在 JavaScript 执行栈内,不是 DOM 更新流程的一部分。
Patch 不感知、也不修改计算属性的依赖链
当父组件更新导致子组件重渲染时:
- Vue 先用新 props 和新状态调用子组件的
render(),生成新的 VNode; - 新 VNode 中若引用了某个计算属性(如
{{ fullName }}),会触发该计算属性的 getter; - getter 再次执行 → 重新读取依赖 → 自动完成新一轮依赖追踪(如果依赖对象已变化);
- patch 只对比新旧 VNode 结构,把差异应用到真实 DOM,对计算属性内部发生了什么一无所知。
什么情况下“看起来像 patch 触发了追踪”?
实际是渲染副作用被调度后,连带触发了计算属性求值:
- 响应式数据变更(如
count.value++)→ 触发关联的 effect(含渲染函数)进入更新队列; - 微任务中执行该 effect → 重新运行
render()→ 访问计算属性 → getter 执行 → 依赖被重新收集; - 整个链条里,patch 是最后一步,它不启动追踪,只是消费了追踪结果所生成的新视图。
调试依赖是否正常收集?
可借助以下方式验证:
- 在计算属性 getter 中加
console.log,观察调用时机是否与预期依赖变更一致; - 使用 Vue Devtools 的 “Reactivity” 面板,查看该计算属性对应的 computed ref 是否正确列出所有依赖项;
- 若依赖未更新,优先检查:是否读取的是非响应式值(如
Date.now())、是否用了数组索引直接赋值(Vue 3 虽支持 Proxy,但某些边界场景仍需triggerRef显式通知)。











