Vue 3 中 watch 监听器必须可控、可终止、可追溯，须用 ref 存储 stop 函数并在 onBeforeUnmount 中调用；禁用顶层未保存的 watch，避免 deep 监听 reactive 对象，watchEffect 需配合 onInvalidate 清理异步操作，推荐 EffectScope 批量管理。
Vue 3 中规范团队使用 watch 监听器，核心不是“用了没”，而是“是否可控、可终止、可追溯”。尤其在 Composition API 下，watch 类监听器（watch、watchEffect、$subscribe）若未显式停止，会持续绑定响应式依赖，导致组件卸载后仍触发回调、访问已销毁的 ref 或 this 上下文，引发报错或内存泄漏。
必须统一用 stop 函数管理生命周期
所有手动创建的 watch 监听器，必须保存其返回的 stop 函数，并在组件卸载前调用。不能依赖自动清理——除非它被 EffectScope 显式包裹且 scope 已 stop。
-
watch(source, callback)和watchEffect(callback)都返回一个可执行的stop()函数 - 推荐统一用
ref存储 stop 函数：const stopWatch = ref(null)，赋值时写stopWatch.value = watch(...) - 在
onBeforeUnmount或onUnmounted中判空调用：stopWatch.value?.() - 避免在 setup 顶层直接调用 watch 后不存 stop —— 这类监听器无法在卸载时控制
watch 的清理时机必须早于组件失活
清理动作必须发生在组件实例仍完整可用的阶段。Vue 3 明确区分了“卸载前”和“卸载后”：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- ✅ 正确位置：
onBeforeUnmount—— 组件 DOM 尚未移除，响应式系统完好，ref、computed、props全部可读 - ❌ 危险位置：
onUnmounted—— 此时组件实例已解绑，部分响应式属性可能为undefined或只读，stop()调用虽不报错，但若回调中还访问 this 或未置空的 ref，极易出错 - ⚠️ 特别注意：watchEffect 内部若发起异步操作（如
await api.get()），需配合onInvalidate清理待处理的 Promise，防止旧请求结果覆盖新状态
watch 源与副作用必须可验证、不隐式持有引用
团队审查应能一眼判断监听逻辑是否安全。以下为硬性检查点：
立即学习“前端免费学习笔记（深入）”；
- 监听 reactive 对象时，禁止直接
watch(obj, ...)—— 会强制 deep，性能差且 oldVal 不可靠；应监听具体字段：watch(() => obj.field, ...) - 避免在 watch 回调中直接修改被监听源（造成无限循环），需加条件守卫或用
watchSync替代 - 不使用箭头函数或内联函数作为事件处理器嵌套在 watch 内部（如
el.addEventListener('click', () => {...})），否则无法在清理时 removeEventListener - 涉及 DOM 操作或第三方库更新的 watch，必须配套清理逻辑（例如 watch 数据后调用
chart.setOption()，卸载时就要chart.dispose()）
结合 EffectScope 实现批量受控管理
对复杂组件或多个 watch 共存场景，推荐用 EffectScope 统一收口生命周期：
- 创建活跃 scope：
const scope = effectScope(true) - 在 scope 内注册 watch：
scope.run(() => watch(...)) - 卸载时只需
scope.stop()—— 它会自动 stop 所有注册的 effect，并执行onScopeDispose注册的清理函数 - EffectScope 天然支持嵌套和树形管理，适合模块化组件或可复用 hook 封装
