Vue.js响应式调试核心在于让依赖可见、可干预、可验证；通过启用debug模式、手动track/trigger、暂停追踪比对、effectScope局部控制等手段实现精准调试。
Vue.js 响应式系统调试的核心，不在于“猜依赖在哪”，而在于让依赖关系可见、可干预、可验证。@vue/reactivity 模块不仅提供 reactive、ref 等常用 API，还内置了一套面向调试与精细控制的底层能力——它们默认隐藏，但一旦启用，就能直击响应式行为的本质。
启用响应式调试模式
Vue 3.4+ 默认关闭详细追踪日志，需手动开启：
- 开发环境启动时设置全局标志：__DEV__ = true（通常已由 vite/vue-cli 自动注入）
- 在浏览器控制台执行：Vue.reactivity.debug = true（需确保使用的是包含调试构建的 @vue/reactivity）
- 效果：effect 执行、track/trigger 触发、dep 订阅变化等关键路径会输出结构化日志，含 effect ID、target、key、操作类型
手动触发与拦截依赖收集
当组件未按预期更新，或更新过于频繁时，可绕过自动机制，精准控制依赖链：
- 用 track(target, TrackOpTypes.GET, key) 显式声明某 effect 依赖某个字段，即使该字段当前未被读取（例如预加载缓存场景）
- 用 trigger(target, TriggerOpTypes.SET, key) 在外部数据变更后（如 WebSocket 推送、localStorage 同步）强制刷新视图，无需修改响应式对象本身
- 注意：track/trigger 必须在 activeEffect 存在时调用（即处于 effect 或 computed 内部），否则无效
暂停追踪 + 快照比对定位冗余依赖
高频渲染卡顿？很可能是副作用函数无意中读取了大量响应式字段，导致每次微小变更都引发重计算：
立即学习“前端免费学习笔记（深入）”；
- 在疑似性能瓶颈的 effect 内部调用 pauseTracking()，再执行 JSON.stringify、深克隆或 diff 计算
- 随后调用 resetTracking() 清空本次暂存的依赖记录，避免污染后续逻辑
- 配合调试日志，对比 pause 前后的 track 日志条目，快速识别哪些字段被“误读”（比如只用于日志打印却触发了渲染）
结合 effectScope 实现局部调试开关
大型模块中，你可能只想观察某几个 effect 的行为，而非整个应用：
- 用 const scope = effectScope(true) 创建一个可暂停/恢复的作用域
- 在该 scope 内注册 effect：scope.run(() => effect(...))
- 随时调用 scope.stop() 暂停所有关联 effect，或 scope.resume() 恢复——这比注释代码更安全、可逆
- 特别适合隔离测试 computed 行为、模拟状态冻结、或临时禁用第三方响应式插件
