vue组件健壮性需错误边界捕获渲染异常并提供兜底ui：onerrorcaptured捕获后代组件错误，配合haserror控制降级渲染；接口失败与空数据需业务层主动处理；全局errorhandler仅用于日志上报。
Vue 组件要真正健壮，不能只靠逻辑正确，更得扛得住异常——接口失败、数据为空、子组件崩溃，都得有应对。核心就两点：错误边界捕获渲染异常，兜底渲染提供可理解的反馈。
用 onErrorCaptured 捕获子组件错误
这是 Vue 3 实现错误边界的基石。它不是监听自身错误，而是专门捕获后代组件在渲染、生命周期钩子中抛出的未处理错误。
- 必须在父级组件中声明，才能拦截其 slot 或子组件树里的错误
- 钩子返回 true 可阻止错误继续向上冒泡，避免触发全局 errorHandler
- 配合响应式状态（如
hasError）控制模板切换，展示降级 UI 而非白屏 - 注意它不捕获异步操作（如 setTimeout、API 回调）或事件处理器中的错误，这些仍需 try/catch
封装可复用的错误边界组件
把错误捕获逻辑抽成独立组件，能大幅减少重复代码，也利于统一错误上报和样式。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 模板中用
<slot v-if="!hasError"></slot>渲染正常内容，v-else渲染错误提示 - 内置重试机制（如点击按钮重置
hasError），让用户有操作路径 - 可集成 Naive UI 的
NAlert、NButton等，保持视觉一致性 - 支持透传 props 或插槽，保证包裹任意组件时行为可控
接口失败与空数据的兜底设计
错误边界管的是“渲染崩溃”，而接口失败、无数据属于业务异常，需在数据层或组件层主动处理。
- 请求失败（网络错误、4xx/5xx、code !== 0）后，不隐藏列表，而是显示带重试按钮的提示
- 空数据场景区分原因：是真没数据（如搜索无结果），还是加载失败？前者用“暂无内容”，后者用“加载失败，请重试”
- 避免在模板里写
v-if="list.length === 0"就直接展示“暂无数据”，要结合 loading 和 error 状态综合判断 - 对关键区域（如主内容区、卡片列表）强制设置兜底，而不是依赖父组件统一处理
全局 errorHandler 作为最后一道防线
当错误未被任何 onErrorCaptured 拦截时，会落到应用实例的 errorHandler。
- 适合做错误日志上报（如发送到 Sentry 或自建监控平台）
- 可记录错误堆栈、组件路径、用户操作上下文等关键信息
- 不建议在此处修改 UI 或跳转页面——它已失去组件上下文，无法安全更新视图
- 应与前端监控体系打通，形成“捕获 → 上报 → 告警 → 修复”的闭环
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
