计算属性通过在get函数中主动兜底来安全处理null/undefined：对象解构用user || {}或可选链+空值合并，深层嵌套逐层判断，数值运算显式转数字，空值返回有意义默认值。
计算属性本身不直接“处理”null或undefined，但它能帮你安全地派生值、避免访问崩溃。关键不在计算属性怎么“容错”，而在于你如何在get函数里做兜底——把边界值拦截在源头，不让它们穿透到渲染层或深层属性访问中。
访问对象属性前先兜底
当计算属性依赖一个可能为null/undefined的对象（比如接口返回的用户数据），直接解构或链式访问会报错：
-
❌ 危险写法：
const { name, email } = user;（user为空时直接崩溃） -
✅ 安全写法：
const { name = '游客', email = '' } = user || {}; - 更推荐用可选链 + 空值合并：
user?.profile?.avatar ?? '/default-avatar.png'
深层嵌套结构用防御性解构
遇到类似order.items[0].product.name这种路径，别硬写。把它拆进计算属性的get里，并逐层判断：
- 先确认
order存在 → 再确认items是数组且非空 → 最后取product和name - 示例：
return order && Array.isArray(order.items) && order.items.length ? order.items[0].product?.name ?? '未知商品' : '暂无订单';
数值类计算避免 NaN 和隐式转换
null或undefined参与算术运算会变成NaN，进而污染整个计算结果：
-
❌ 风险操作：
price * count（任一为null或undefined→NaN） -
✅ 显式转数字：
Number(price) || 0或parseFloat(price) ?? 0 - 组合使用：
(Number(price) || 0) * (Number(count) || 0)
空值场景主动返回有意义的默认态
不要让计算属性返回undefined再交给模板处理——模板里{{ title }}显示undefined很丑，还可能触发后续逻辑错误：
- 统一兜底语义：
title ?? '未命名项目'、status ?? '待提交' - 对布尔类计算，避免
!!value这种模糊转换；明确写value === true或Boolean(value)并说明意图 - 若业务上
null和undefined含义不同（如“未设置”vs“已清空”），建议用switch区分处理，而非一概||
