onErrorCaptured用于捕获子组件树同步错误，需手动存入响应式状态并返回false阻止冒泡，再绑定模板实现降级UI；无法捕获setup同步错误、异步错误及事件处理器错误。
在 Vue 3 的组合式 API 中，onErrorCaptured 是一个生命周期钩子，用于捕获其子组件树中抛出的错误（不包括异步错误和 Promise 拒绝），但它本身不会自动向上抛出错误，也不能直接触发 UI 降级提示。要实现“捕获 → 向上通知 → 展示降级 UI”，需要手动配合状态管理与响应式逻辑。
1. 在 onErrorCaptured 中拦截并标记错误状态
该钩子接收三个参数：err、instance、info。你可以用 ref 或全局状态记录错误，并阻止默认冒泡（返回 false）来终止向上传播：
- 返回
false阻止错误继续向父组件传递 - 把错误信息存入响应式变量（如
error.value = err），供模板或计算属性消费 - 避免在钩子内直接调用
throw err—— 这不会被 Vue 的错误处理机制捕获，反而可能中断渲染
2. 用响应式状态驱动降级 UI
将错误状态与视图绑定，例如：
const error = ref(null)
onErrorCaptured((err, instance, info) => {
error.value = {
message: err.message,
component: instance?.type?.name || 'unknown',
hook: info
}
return false // 阻止冒泡
})
// 模板中：
// <div v-if="error"><p>⚠️ 页面加载异常，请稍后重试</p></div>
// <div v-else><slot></slot></div>
3. 主动触发错误通知（可选增强）
如果需要统一错误上报或弹窗提示，可在 onErrorCaptured 内调用自定义函数：
- 调用
notifyUser({ type: 'error', message: err.message })触发 Toast 或 Modal - 通过
provide/inject或 Pinia 注入一个错误处理器，让任意层级都能注册监听 - 注意：不要在此处 await 异步操作（如 API 上报），否则可能阻塞渲染；建议用
nextTick或微任务延迟执行
4. 注意边界与限制
onErrorCaptured 无法捕获以下情况：
- 组件自身的
setup()同步错误（需靠外部 try/catch 或编译时检查） - 异步操作中的错误（如
setTimeout、未 await 的 Promise） - 事件处理器中的错误（应单独 try/catch）
- 服务端渲染（SSR）期间的错误（需在 server entry 处理）
对这些场景，需结合 window.onerror、window.onunhandledrejection 和组件内防御性编程共同覆盖。
