调试 watchEffect 依赖收集需理解其首次执行时自动追踪响应式读取的机制，可通过 Vue Devtools 响应式追踪、Proxy 拦截 get、onTrack/onTrigger 日志三种方式落地实现。
要调试 watchEffect 的依赖收集过程，核心是理解它在**首次执行时自动追踪响应式数据读取**这一机制，并通过工具或手动方式观察哪些值被“碰过”。Vue 3 本身不提供直接的依赖图谱 API，但有几种实用、可落地的调试方法。
启用 Vue Devtools 的响应式追踪
这是最直观的方式：
- 确保使用 Vue Devtools v6.6+（适配 Vue 3）且项目运行在开发模式下
- 打开 Devtools → 切换到 “Composition” 或 “Reactivity” 标签页
- 在组件中触发
watchEffect（比如修改相关响应式变量），Devtools 会高亮显示该 effect 当前追踪的依赖项（如ref、reactive属性等） - 注意：需在 effect 内部真正读取响应式值（如
state.count），仅声明不读取不会被收集
用 console.trace + 响应式对象的 get 拦截器临时观测
适合快速定位某次执行中读取了哪些属性：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 对目标
reactive对象，用proxy包裹并重写get，在每次读取时打印调用栈 - 示例：
<!-- 在 watchEffect 执行前临时包装 -->
const observed = new Proxy(target, {<br> get(target, key, receiver) {<br> console.log(`[Dep Read] ${String(key)}`);<br> console.trace(); // 显示谁触发了这次读取<br> return Reflect.get(target, key, receiver);<br> }<br> }); - 注意：仅用于调试，切勿保留在生产环境；对
ref需包装其.value访问逻辑
在 watchEffect 内部添加依赖快照日志
利用 effect 执行时的“当前活跃 effect”特性，配合自定义逻辑记录：
立即学习“前端免费学习笔记（深入）”；
- 借助
onTrack和onTrigger（需在effectScope或watchEffect的 options 中传入） - 示例：
watchEffect( (onInvalidate) => {<br> console.log('Effect running...');<br> doSomething(state.a, state.b.name);<br> }, {<br> onTrack(e) {<br> console.log('[Track]', e.type, e.key, 'on', e.target);<br> },<br> onTrigger(e) {<br> console.log('[Trigger]', e.type, e.key, 'caused by', e.event);<br> }<br> }); -
onTrack在依赖被收集时触发（首次运行时每个响应式访问都会触发），onTrigger在依赖变化导致重新执行时触发
避免常见误判：确认 effect 是否真被收集
很多“没反应”其实不是收集失败，而是逻辑问题：
- 检查是否在 effect 内部 没有实际读取响应式数据（例如只写了
props.xxx但 props 是只读对象，或读取的是非响应式字段） - 确认变量是否真的由
ref/reactive创建（普通 const/let 不会被追踪） - 注意异步读取陷阱：如果在
setTimeout或 Promise 回调里读取响应式数据，此时 effect 已结束，不会被收集 - 嵌套对象需逐层访问：
obj.value会收集，但obj.nested?.name中若nested为 null，则name不会被访问，也就不会收集
