vue 3调试错误需组合使用onerrorcaptured（捕获子组件同步错误）和app.config.errorhandler（兜底捕获组件内未处理异常），并配合devtools断点与info线索精准定位。
Vue 3 中没有“在生命周期钩子里自动捕获错误”的机制，但可以通过两个互补的手段，在调试阶段精准定位和获取错误信息：一个是组件级的 onErrorCaptured（组合式 API）或 errorCaptured（选项式 API），另一个是应用级的 app.config.errorHandler。它们分工明确，配合使用才能覆盖大多数调试场景。
用 onErrorCaptured 捕获子组件同步错误（父组件视角）
这个钩子专为调试子组件问题设计，适合在开发时快速看到“谁出错了、在哪出的”。它只对子组件（含孙子）抛出的同步错误生效，比如模板中访问 undefined 属性、子组件生命周期里 throw new Error()、@click 处理函数崩溃等。
- 必须在父组件中声明，不能捕获自身 setup 或渲染错误
- 接收三个参数：err（错误对象）、instance（出错的子组件实例）、info（字符串，如 "render function" 或 "v-on handler"）
- 在开发环境可直接 console.log(err, info)，快速定位错误来源
- 返回 false 可阻止错误继续冒泡到全局处理器，避免重复打印；不返回则继续上传
用 app.config.errorHandler 捕获组件内所有未处理异常（应用兜底）
这是调试时最常检查的“最后防线”，能捕获当前组件自身的 setup 同步错误、模板渲染异常、watch/computed 同步 getter 错误、onMounted 等钩子里的异常——只要没被 try/catch 或 onErrorCaptured 拦下，都会落到这儿。
- 在 main.js 创建 app 后立即配置，例如：app.config.errorHandler = (err, instance, info) => { console.group('? Vue 错误'); console.error(err); console.log('组件:', instance?.type?.name); console.log('位置:', info); console.groupEnd(); }
- instance 参数在开发时很有用：能拿到出错组件的 name、props、甚至响应式状态快照（需配合 debugger）
- 注意它不捕获 Promise reject、setTimeout、fetch 回调等异步错误，这类要单独监听 unhandledrejection
配合浏览器 DevTools 提升调试效率
光靠日志还不够，要让错误“可点击、可断点、可回溯”：
- 在 errorHandler 里加 debugger，错误触发时自动暂停，方便查看调用栈和作用域变量
- Chrome 控制台开启 “Pause on caught exceptions” 和 “Pause on uncaught exceptions”，配合 Vue 错误堆栈定位源头
- 在子组件出错位置手动加 throw new Error('? DEBUG: mounted failed')，再用 onErrorCaptured 捕获，比猜更可靠
- 利用 Vue Devtools 的 Components 面板，选中组件后看右侧 Events 标签，能实时看到 errorCaptured 是否被触发
别踩这些调试坑
有些常见操作会让错误“隐身”，导致调试困难：
- 在 onErrorCaptured 或 errorHandler 里更新响应式数据（如 this.hasError = true），如果模板中又读取了可能出错的计算属性，会引发二次错误和无限循环
- 把异步操作（如 await apiCall()）放在生命周期钩子里却不加 try/catch，错误不会进 errorHandler，只会变成 unhandledrejection
- 混淆 errorCaptured 和 try/catch：前者是跨组件边界拦截，后者只能捕获当前函数内同步错误
- 忽略 info 字符串——它是判断错误类型的关键线索，比如 "setup function" 表示 setup 内部出错，"watcher getter" 表示某个 watch 出问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
