errorCaptured是父组件中声明的钩子，用于捕获子孙组件在同步渲染、生命周期或事件处理中抛出的错误；需在Options API中作为选项方法或Composition API中调用onErrorCaptured，返回false（Options）或true（Composition）阻止冒泡，并配合状态实现降级UI。
Vue 单文件组件中使用 errorCaptured 捕获子孙组件异常，核心是：在**父级组件中声明该钩子**，它会自动拦截其直接或深层子组件在同步渲染、生命周期、事件处理等环节抛出的错误，并支持状态响应与错误阻断。
如何在 SFC 中正确声明 errorCaptured
该钩子需定义在组件选项（Options API）或组合式 API 的 setup 中，不能写在子组件自身——它只对“后代”生效，不对自己起作用。
-
Options API 写法（Vue 2 / Vue 3 兼容）：直接作为组件选项方法，接收
err、vm、info三个参数 -
Composition API 写法（Vue 3 推荐）：在
setup()中调用onErrorCaptured()函数，传入回调 - 必须显式返回
false（Options）或true（Composition）才能阻止错误继续冒泡；不返回或返回其他值，错误仍会上抛至上级或全局处理器
配合状态实现降级 UI 展示
仅捕获错误不够，还要让用户无感。典型做法是在组件中维护一个错误标识，再通过条件渲染切换内容。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 用
data()（Options）或ref()（Composition）定义hasError: false - 在
errorCaptured或onErrorCaptured回调中设为true，并可选地保存err.message或组件名用于提示 - 模板中用
v-if="!hasError"渲染正常内容，v-else显示友好 fallback（如“加载失败，请重试”） - 避免在 fallback 区域访问可能再次出错的数据（例如未初始化的响应式对象），否则会触发无限更新循环
哪些错误能捕获？哪些不能？
errorCaptured 是有明确边界的守门员，不是万能兜底：
-
能捕获：子组件模板求值（如
{{ user.name }}中user为undefined）、setup()同步执行、mounted等生命周期钩子、@click等同步事件处理器中抛出的Error -
不能捕获：异步错误（
Promise.reject()、setTimeout(() => { throw new Error() })）、原生 DOM 事件错误（需额外try/catch）、fetch/axios请求失败（需.catch或try/catch）、编译期模板语法错误（如{{ undefined.prop }}）
建议搭配全局 errorHandler 做兜底
errorCaptured 是局部防线，生产环境务必配置 app.config.errorHandler（Vue 3）或 Vue.config.errorHandler（Vue 2）作为最后保障：
- 捕获所有未被
errorCaptured拦截的 Vue 内部错误（如 watcher 执行异常、watch 回调报错） - 开发时保留完整堆栈输出；生产时过滤敏感字段（如 URL 参数、token），再上报监控平台（如 Sentry）
- 注意：它无法捕获
window.onerror和unhandledrejection覆盖的纯 JS 错误，这两者仍需单独监听补位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
