调试 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 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章