Vue 响应式副作用函数异常不会自动捕获，需在函数内用 try-catch 主动处理；watch/watchEffect 错误不影响依赖追踪但可能残留资源；全局 errorHandler 可统一收口日志上报；避免在 watch 中直接修改监听源以防循环更新。
Vue 响应式系统中副作用函数（如 effect、watch、watchEffect）执行时若抛出异常，不会自动被拦截或静默吞掉——它会像普通 JavaScript 错误一样冒泡，可能中断响应式更新链，甚至导致组件渲染失败或内存泄漏。关键不是“能否捕获”，而是“在哪里捕获、怎么处理才不影响响应式逻辑的稳定性”。
副作用函数内需主动包裹 try-catch
Vue 不会对副作用函数体做错误兜底。你必须在函数内部显式处理潜在异常，尤其在涉及 DOM 操作、API 请求、第三方库调用等易错环节：
-
DOM 相关操作：比如
document.querySelector返回null后调用.innerText，应提前判空 -
异步请求：fetch 或 axios 调用必须配合
try/catch或.catch()，否则未捕获的 Promise rejection 会触发全局 unhandledrejection -
计算属性依赖路径变动：如
obj.user?.profile?.avatar在数据结构临时不完整时容易报错，建议用可选链或默认值兜底
watch 和 watchEffect 的异常不影响依赖追踪
即使 watch 回调执行出错，Vue 仍能正常维护依赖关系。但要注意：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 错误不会阻止后续依赖更新触发该 watch —— 下次变更仍会重试执行，可能反复报错
-
watchEffect中若未处理异常，会导致 effect 内部清理逻辑（如onInvalidate）无法运行，已发起的请求或定时器可能残留 - 推荐结构：
watch(() => state.id, async (id) => { try { await fetchUser(id) } catch (e) { console.warn('获取用户失败:', e) } })
利用 Vue 全局错误处理器统一收口
对漏网的副作用异常，可通过 app.config.errorHandler（组合式 API）或 Vue.config.errorHandler（选项式）集中捕获：
立即学习“前端免费学习笔记（深入）”；
- 该钩子能拿到错误对象、当前组件实例（vm）、错误发生位置信息（如
render、watcher、setup） - 特别适合记录日志、上报监控系统，但不要在此处修改响应式状态，否则可能引发二次更新异常
- 示例：
app.config.errorHandler = (err, instance, info) => { if (info.startsWith('watcher')) { /* 专治副作用函数错误 */ } }
避免副作用函数中修改监听源引发循环
这不是异常处理，却是常见“伪异常”诱因：在 watch 回调里直接改被监听的 ref 或 reactive 字段，可能触发无限更新。Vue 默认会限制递归深度（如 100 层），超限后抛出 Maximum recursive updates 错误。
- 解法一：加条件判断，只在必要时更新，例如
if (newVal !== oldVal) { ... } - 解法二：使用
flush: 'post'延迟到 DOM 更新后执行，降低同步冲突概率 - 解法三：改用
watchSync（仅 Vue 3.4+）或手动控制触发时机
