vue 3 的 computed 不支持错误捕获，调试重点是快速定位触发错误的代码位置和响应式行为；可用 ontrack/ontrigger 查依赖链路、控制台追踪调用栈、检查模板误用、处理未初始化数据，并借助 vue devtools 分析反向依赖与异常触发源。
Vue 3 的 computed 本身不支持错误捕获（它不是执行上下文，也不抛出可被 try/catch 拦截的异常），但报错往往暴露了深层问题——比如副作用、死循环、访问未定义属性等。调试重点不在“捕获错误”，而在于**快速定位触发错误的代码位置和响应式行为**。
用 onTrack / onTrigger 查依赖链路
Vue 提供了仅在开发模式下生效的调试钩子，能直观看到计算属性何时被追踪、为何重新求值：
- onTrack：当 computed 第一次读取某个响应式字段时触发，告诉你“它依赖谁”
- onTrigger：当依赖变化导致 computed 重新执行时触发，告诉你“谁变了，怎么变的”
示例：
const count = ref(0)
const doubled = computed({
get: () => {
if (count.value return count.value * 2
},
onTrack(e) { console.log('tracked', e) },
onTrigger(e) { console.log('triggered', e) }
})
控制台会输出依赖对象、key、类型等信息，帮你确认是否意外追踪了不该追踪的响应式变量（比如一个正在被修改的嵌套对象）。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
加 console.trace 快速识别死循环
遇到 Maximum recursive updates exceeded 这类报错，大概率是 computed getter 中修改了自身依赖项。最直接的排查方式是在 getter 开头加：
const myComputed = computed(() => {
console.trace('myComputed triggered')
return someLogic()
})
打开浏览器控制台，看调用栈是否反复出现同一 computed 名称。若连续出现 5 次以上，基本可断定存在读写闭环。
检查模板中是否误用函数或未初始化数据
很多报错其实源于模板层，而非 computed 本身：
- 模板里写了
{{ riskyMethod() }}，而该方法内部修改了响应式数据 → 每次重渲染都触发，形成循环 - computed 依赖了尚未初始化的 ref（如
ref(null)），却直接访问xxx.value.field→ 报Cannot read property 'field' of null - 使用可选链
?.或空值合并??可避免这类运行时错误，例如：user.value?.name ?? '匿名'
借助 Vue Devtools 定位反向依赖
安装 Vue Devtools 后，在 “Reactivity” 面板中找到对应 computed 属性，点击展开依赖图。重点关注：
- 是否出现了“自己依赖自己”的环形箭头（说明有反向赋值）
- 依赖列表中是否有非预期的 ref/reactive（比如监听了一个本该由 watch 处理的输入框值）
- 右侧“Triggers”栏是否列出了不该触发它的变更源（例如某次 API 成功回调意外更新了 computed 的依赖）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
