vue 3 computed 中处理空值需主动拦截、分层兜底、语义明确：用可选链+空值合并安全访问，解构前兜底，深层结构逐层校验，数值/布尔运算显式转换，将空值转为有业务意义的默认态。
在 Vue 3 的 computed 中处理空值，核心不是“等它出错再补救”，而是主动拦截、分层兜底、语义明确。空值（null、undefined）本身不响应，但它们藏在响应式数据里时，会直接导致计算属性崩溃或返回 undefined，进而让模板显示异常甚至阻断渲染。
用可选链 + 空值合并做安全访问
这是最轻量、最推荐的第一道防线，尤其适合读取嵌套字段：
- 直接在
computed的 getter 内使用?.和??，无需额外判断：user?.profile?.avatar ?? '/default.png' -
??只在左侧为null或undefined时生效，不会误把0、''当空——这点比||更精准 - 避免写成
user && user.profile && user.profile.avatar || '/default.png'，冗长且||会把假值都覆盖
对象解构前先做存在性兜底
别让解构操作成为第一个报错点：
- ❌ 危险：
const { name, email } = user;（user为null就崩） - ✅ 安全：
const { name = '游客', email = '' } = user || {}; - 更进一步，配合类型守卫（如 TypeScript 中的
user is User类型谓词），可在开发期提前暴露空值风险
深层结构用防御性逻辑逐层校验
遇到 order?.items?.[0]?.product?.name 这类路径，不要全堆在模板或一行表达式里。把它放进 computed 的 getter 中，显式控制每一步：
- 先确认主对象存在：
if (!order) return '暂无订单'; - 再检查数组有效性：
if (!Array.isArray(order.items) || order.items.length === 0) return '订单为空'; - 最后取值并兜底：
return order.items[0].product?.name ?? '未知商品'; - 这样逻辑清晰、可读性强，也方便后续加日志或埋点
数值/布尔类计算必须显式转换
null 或 undefined 参与运算会产出 NaN，污染整个结果链：
- ❌ 错误：
price * quantity（任一为空 →NaN） - ✅ 推荐：
(Number(price) || 0) * (Number(quantity) || 0) - 对布尔状态，避免模糊的
!!value；明确写value === true或Boolean(value) === true，并注释业务含义（比如null表示“未审核”，false表示“已拒绝”）
本质上，computed 是你控制空值的“守门员”——它不替你决定业务含义，但给你空间把 null 和 undefined 转换成有业务意义的默认态，比如 '加载中'、'暂无数据'、0 或 false。只要在 getter 里守住这一关，模板就能干净利落地消费结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
