computed 不能用 try/catch 捕获异常，因其是纯函数式响应式求值机制，异常会直接中断渲染；正确做法是前置校验、状态封装或模板降级。
计算属性内部不能也不该捕获异常来“避免模板崩溃”——因为 computed 本身不执行错误处理，也不支持 try/catch。它只是一个响应式求值函数，一旦 getter 抛错，Vue 渲染就会中断，模板显示空白或报错，这是设计使然。
为什么 computed 里不能放 try/catch？
Vue 的 computed 是基于依赖追踪的惰性求值机制，它的 getter 必须是纯函数（无副作用、无异常控制流）。在 setup() 或 data 中定义的 computed，其内部若 throw 错误，会直接冒泡到渲染层，而 Vue 不允许你在 getter 里用 try/catch 拦截并返回兜底值——这会破坏响应式链和缓存逻辑。
强行包裹 try/catch 不仅无效（Vue 不识别、不接管），还会掩盖真实问题，让错误静默，调试更困难。
真正有效的替代方案
要让 UI 稳定、不因计算逻辑出错而崩溃，应把异常拦截提前到数据源头或展示层：
-
前置校验依赖数据：在 computed 读取前确保源数据结构安全。例如：
user?.profile?.name || '未知用户'，而不是user.profile.name直接访问 - 用 ref + watch 手动管理派生状态：把可能出错的逻辑移到 watch 或 onMounted 中，出错时设一个 errorRef，并在模板中用 v-if 分支控制渲染
-
模板中降级渲染：对高风险计算结果使用可选链 + 空值合并，比如
{{ (userInfo?.stats?.total ?? 0) | formatNumber }} -
封装成可恢复的组合式函数：用
useAsyncState或自定义useSafeComputed，内部用 reactive 包裹 { value, error, loading }，把异常转为状态而非中断
常见踩坑与修复示例
❌ 错误写法（导致 Maximum recursive updates 或白屏）：
const fullName = computed(() => {
try {
return user.value.firstName + ' ' + user.value.lastName
} catch (e) {
return '加载中...'
}
})
✅ 正确做法（分离关注点）：
const fullName = computed(() => {
const u = user.value
return u?.firstName && u?.lastName
? `${u.firstName} ${u.lastName}`
: '未知用户'
})
// 或配合状态标记
const hasUserError = ref(false)
watch(user, () => {
try {
// 验证逻辑
if (!user.value?.id) throw new Error('用户数据缺失')
} catch (e) {
hasUserError.value = true
}
}, { immediate: true })
本质上，computed 是“只读表达式”，不是“容错执行器”。异常处理要放在它上游（数据获取、校验）或下游（模板条件、状态管理），而不是塞进 getter 里硬扛。
