Vue 3响应式调试核心是分层验证：先确认ref/reactive是否被Proxy劫持，再用onTrigger捕获修改源头，结合DevTools可视化依赖，最后通过全局debugData+watch+console.trace定位读写路径。
调试 Vue Composition API 中复杂的响应式依赖链路，核心是搞清“谁读了它”和“谁改了它”。Vue 3 的 Proxy 响应式机制本身会自动收集依赖、触发更新，但链路过深或跨组合函数时容易迷失源头。关键不在于堆砌工具，而在于分层验证：先确认响应式是否真正生效，再定位读取点，最后捕获修改动作。
验证响应式是否被正确劫持
很多“不响应”问题其实源于数据根本没进响应式系统。先做基础检查：
- 对目标 ref 或 reactive 对象，在控制台执行
Object.getOwnPropertyDescriptor(obj, 'key')，若返回对象含get/set方法，说明已被 Proxy 劫持；若只有value，就是普通属性 - 对嵌套对象新增属性后（如
state.user.profile = { age: 25 }），再查profile的描述符，确认新字段也具备响应式能力 - 对数组调用
push/pop后视图未更新？检查是否用reactive包裹了整个数组，而不是只包裹了数组里的对象
用 onTrigger 精准捕获修改源头
在开发环境（devtools: true）下，给 watch、computed 或 effect 显式传入 onTrigger 钩子，它会在数据被 set/delete 时回调，直接告诉你谁动了哪条数据：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 回调参数包含
event（'set'或'delete'）、target（原始对象）、key（触发属性名）、newValue/oldValue、receiver（代理对象） - 示例：监控
form.name变更，可快速定位是表单提交逻辑、API 回调还是键盘事件处理函数触发的赋值 - 注意：该 API 仅限开发环境，生产构建中会被移除
借助 Vue DevTools 实时可视化依赖关系
Vue DevTools v6+ 的 “Reactivity” 和 “Events” 面板能大幅降低链路分析成本：
立即学习“前端免费学习笔记（深入）”；
- 选中组件 → 切到 “Reactivity” 标签 → 展开响应式对象 → 点击属性旁的 “?️” 图标，查看哪些 computed、watch 或渲染函数正在订阅它
- 切换到 “Events” 面板 → 开启 “Track reactivity” → 操作界面，实时列出每次响应式触发的 effect 名称及其源码位置（文件+行号）
- 对可疑的 computed 右键 → “Debug computed”，可看到它的完整依赖图和上次计算耗时，判断是否因某个深层 ref 变更导致反复重算
动态挂载 + 控制台 watch 快速验证读写路径
不改业务代码也能实时观察数据流：
- 在 setup 中临时执行
window.debugData = reactive({ search: '' })，把目标状态挂到全局 - 监听读取：
watch(() => window.debugData.search, () => console.log('search 被读取'), { immediate: true })，确认是否进入依赖收集 - 监听修改：
watch(() => window.debugData.search, (n, o) => console.trace('search 从', o, '变为', n))，trace 会打印完整调用栈，精准定位赋值语句所在行 - 技巧：Chrome 控制台右键 trace 日志 → “Blackbox content scripts”，可过滤 Vue 内部调用，聚焦你自己的业务代码
