vue 3 中空数据兜底需主动识别+分层渲染，区分 loading、error、empty 三态；api 封装标准化返回，组件内 computed 判定数据有效性并配合 v-if 渲染主内容或空态组件。
Vue 3 中对接口空数据的兜底展示，不是靠“捕获错误”，而是靠**主动识别 + 分层渲染**。空数据（如 []、{}、null）本身不是运行时异常，app.config.errorHandler 不会触发。真正要做的，是把“数据为空”当作一种业务状态来设计 UI 反馈，而非等待报错才响应。
区分 loading、error、empty 三类状态
很多项目混淆了这三者，导致白屏、重复提示或逻辑错乱。必须在请求生命周期中明确分离：
-
loading：请求已发、尚未返回，显示骨架屏或 loading 指示器（如
v-loading） - error：网络失败、500、401 等真实异常，走 axios 响应拦截 + 全局错误处理统一提示
-
empty：请求成功（status 200）、code=200，但
data字段为空（如list: []或chartData: null），此时应渲染空态组件，不弹错误提示
在业务层做空值判断并切换渲染
不要等模板里写 v-if="list.length === 0" 手动拼提示。应在数据到达组件前完成语义化判定：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- API 封装层返回标准化结构：
{ code: 200, data: [...], message: 'ok' }，响应拦截器自动提取data - 组件内用
computed判断有效数据：const hasData = computed(() => Array.isArray(data.value) ? data.value.length > 0 : !!data.value) - 配合
v-if控制主内容与空态区域：<div v-if="hasData">...</div> <el-empty v-else description="暂无订单"></el-empty>
按场景选择合适的空态组件
不同容器对空态支持程度不同，选对方式才能兼顾体验与维护性：
-
通用列表/卡片区：直接使用
<el-empty></el-empty>，支持自定义文案、图标、操作按钮，多语言友好 -
el-table 表格：必须用
#empty插槽替代默认提示，可嵌入引导按钮（如“去新建”），避免被动文案 -
ECharts 图表：不依赖外部组件，改用空配置项，例如
{ title: { text: '暂无数据', textStyle: { color: '#999' } } }，防止图表初始化失败 -
图片资源：用
v-img自定义指令处理加载失败，支持 fallback 图 + 重试，不触发@error死循环
避免常见误区
空数据兜底容易陷入两个陷阱：
- 把空数据当成 error 处理：在响应拦截里
if (!res.data) throw new Error('无数据')—— 这会让正常业务流进全局 errorHandler，误导监控、干扰用户感知 - 模板里层层判空：
{{ user?.profile?.avatar ?? '/default.png' }}仅解决字段安全访问，无法承载“无数据”的完整交互意图（如操作入口、说明文案） - 未初始化响应式数据：定义
const list = ref()而非ref([])，导致首次渲染时list.value是undefined，模板访问list.length报错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
