Vue 3 中 computed 抛异常时,开发环境仅警告不中断渲染且依赖实际读取才触发,生产环境则原样冒泡至 app.config.errorHandler;errorCaptured 无法捕获,异步 computed 的 reject 需单独处理。

computed 内部抛出异常时,Vue 3 会将其视为响应式依赖求值过程中的同步错误,这类错误在开发和生产环境的捕获机制一致,但表现和可观察性有明显差异。
开发环境能看见但未必报错
Vue 开发模式下会启用更宽松的错误处理策略,并配合 devtools 提供友好提示。如果 computed 的 getter 中抛出异常(例如访问 undefined.name),Vue 会在控制台打印警告,但不会立即中断渲染或触发全局错误处理器 —— 尤其当该 computed 没被模板实际读取、或被 v-if 条件屏蔽时,错误甚至可能完全不显现。
- 错误只在依赖被真正“触发读取”时发生,比如模板中用了
{{ myComputed }}或 watch 监听了它 - 若 computed 被多次引用,错误通常只在首次求值时抛出,后续因缓存不执行 getter,也就不再报错
- 控制台输出格式为
[Vue warn]: Error in computed property "xxx",附带堆栈,方便定位
生产环境会直接触发 errorHandler
生产构建移除了开发提示逻辑,computed getter 中的同步异常会原样冒泡,最终被 app.config.errorHandler 捕获。这是最可靠、必须配置的捕获入口。
- 确保在
main.js或应用初始化处设置了全局处理器:
if (info.includes('computed getter')) {
console.error('[Computed 错误]', err, info);
// 上报到监控平台
}
};
- 注意:errorHandler 不会拦截 errorCaptured,因为 computed 是当前组件自身的逻辑,不属于“子组件错误”
- info 参数值固定为
"computed getter",是识别 computed 异常的关键标识
不能依赖 errorCaptured 捕获
errorCaptured 只对子组件(含孙子)抛出的错误生效。computed 定义在当前组件 setup 内,属于本组件同步执行逻辑,因此父组件的 errorCaptured 对它无效。
立即学习“前端免费学习笔记(深入)”;
- 即使你在父组件写了
errorCaptured,子组件 computed 报错也不会触发它 - 想在组件内局部处理,只能在 getter 内部手动 try/catch,但需注意这会破坏响应式链路(返回值可能为 undefined 或兜底值)
补充:异步 computed 不会自动捕获
如果 computed 返回的是 Promise(即“异步 computed”),其内部 reject 不会进入 errorHandler,而是变成未处理的 Promise rejection,需单独监听:
- 添加
window.addEventListener('unhandledrejection', ...)兜底 - 更推荐在业务层显式 await + catch,或用
useAsyncState类工具封装


















