Vue computed中无法直接用try...catch捕获异步异常，但可通过可选链（?.）、空值合并（??）、防御性校验、安全工具函数及getter内try-catch处理同步异常实现容错。
在 Vue 的 computed 中无法直接使用 try...catch 捕获同步异常（因为计算属性是纯函数，不支持异步错误处理），但可以通过提前校验、默认值兜底、惰性求值和封装安全访问等方式实现健壮的容错逻辑。
用可选链 + 空值合并提供基础安全访问
对可能为 null、undefined 或缺失字段的响应式数据，优先使用 ?. 和 ?? 避免报错：
computed(() => {
return props.user?.profile?.avatarUrl ?? '/default-avatar.png'
})
这样即使 props.user 或 profile 为 undefined，也不会触发 TypeError。
对高风险计算逻辑做显式防御性校验
当计算涉及数组索引、数学运算、日期解析等易错操作时，在返回前主动判断输入有效性：
- 检查数组长度再取
[0]，避免Cannot read property 'xxx' of undefined - 用
Number.isFinite(val)替代直接val > 0，防止NaN干扰逻辑 - 日期相关计算前先用
isValid(new Date(dateStr))校验
将易错逻辑抽离为带错误边界的工具函数
把可能抛错的代码（如 JSON 解析、正则匹配、第三方格式化）封装成返回默认值的安全函数：
function safeParseJSON(str, fallback = {}) {
try {
return JSON.parse(str)
} catch {
return fallback
}
}
// 在 computed 中使用
computed(() => {
const data = safeParseJSON(props.rawJson, { items: [] })
return data.items.map(x => x.name).join(', ')
})
用 computed 的 getter 函数体包裹 try-catch（仅限同步异常）
虽然不能在箭头函数中写 try，但可以改用完整函数形式，在 getter 内部捕获同步错误：
computed(() => {
try {
// 可能出错的同步操作，如访问深层嵌套、调用有副作用的工具方法
return riskyOperation(props.input)
} catch (err) {
console.warn('Computed fallback triggered:', err)
return '—' // 或其他业务定义的兜底值
}
})
注意：该方式仅对同步异常有效；若内部含 Promise 或异步回调，仍需结合 asyncComputed 或 watchEffect + 状态管理来处理。
