errorcaptured 是 vue 2.5+ 的组件级错误捕获钩子，仅捕获子孙组件在渲染、生命周期或响应式更新中抛出的同步错误，不捕获自身、同级或异步错误。
errorCaptured 是 Vue 2.5+ 引入的组件级错误捕获钩子，专用于父组件拦截子孙组件（含子、孙、曾孙等）在渲染、生命周期或响应式更新中抛出的同步错误。它不是全局兜底，也不能捕获自身、同级或异步逻辑中的错误。
errorCaptured 能捕获哪些错误？
它只响应以下三类同步异常：
- 子组件模板渲染时报错（如
{{ user.name }}中user为undefined） - 子组件生命周期钩子中抛出错误（如
mounted()内调用未定义方法） - 子组件
watch或计算属性 getter 执行时出错（如依赖数据结构突变导致取值失败）
怎么在父组件中正确使用？
在父组件选项中定义 errorCaptured 函数，接收三个参数，并可选择是否阻止错误继续冒泡：
-
err：原生Error实例，含堆栈信息 -
vm：发生错误的子组件实例（不是父组件自己） -
info：字符串，说明错误来源，常见值有"render"、"mounted hook"、"watcher"等 - 返回
false→ 阻止错误向更上层父组件或全局Vue.config.errorHandler传递 - 不返回或返回非
false值 → 错误继续向上冒泡
示例：
export default {
errorCaptured(err, vm, info) {
console.warn(`[Error Boundary] ${info} in ${vm.$options.name || 'anonymous'}:`, err)
// 可在此触发 UI 降级，比如设置局部 loading = false 或显示 fallback 提示
this.hasChildError = true
return false // 拦截，不再上报
}
}
为什么有时候捕获不到错误？
常见原因包括：
- 错误发生在父组件自身（
errorCaptured只捕获子孙，不捕获自己） - 错误是异步的（如
setTimeout、Promise.then、axios.then中抛出），需手动try/catch或用.catch() - 错误来自事件处理器（如
@click回调）——Vue 2.6+ 才支持捕获，旧版需自行包裹 - 错误在编译阶段就已报出（如模板语法错误），不会进入运行时钩子
- 子组件错误被更内层的
errorCaptured先捕获并返回false，未冒泡到当前父组件
配合全局 errorHandler 构建完整防线
errorCaptured 是局部守门员，Vue.config.errorHandler 是应用级兜底。建议在项目入口（如 main.js）统一配置：
Vue.config.errorHandler = function (err, vm, info) {
// 过滤敏感字段，仅上报必要信息
const reportData = {
message: err.message,
stack: err.stack,
component: vm ? vm.$vnode.tag || vm.$options.name : 'root',
info,
url: location.href
}
// 发送到监控服务（如 Sentry、自建接口）
reportError(reportData)
}
这样即使某处漏掉 errorCaptured，也能确保错误不丢失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
