Vue 3 中 watch 不会自动停止监听，需显式调用 stop() 并在 onUnmounted 中清理；异步创建、composable、全局监听等场景必须手动管理，Vue 的自动清理仅限 setup 内同步调用。
Vue 3 中的 watch 本身不会自动停止监听，即使组件卸载了，只要没手动清理，监听器仍会持续运行，可能引发内存泄漏或无效回调。所谓“自动停止”，其实是 Vue 在组件 setup() 内同步调用 watch 时，内部做了生命周期绑定——但这只是默认行为，不可依赖，也不适用于异步创建、composable 或跨组件共享等场景。
真正可靠的做法是：显式获取 stop 函数，并在 onUnmounted 中调用它。
✅ 推荐方式：用 onUnmounted 主动清理
import { watch, onUnmounted } from 'vue'
const stop = watch(source, callback)
onUnmounted(() => {
stop()
})
-
onUnmounted是组件从 DOM 完全移除后执行的钩子，适合释放监听、定时器、事件监听器等。 - 调用
stop()后，依赖追踪立即中断，后续数据变化不会再触发回调。 - 即使多次调用
stop()也安全，仅第一次生效。
⚠️ 注意：不要写成
onUnmounted(stop)—— 因为stop是函数，onUnmounted需要接收一个回调函数，而stop()是立即执行。正确写法是onUnmounted(() => stop())。
? 其他需要手动清理的典型场景
- 在
onMounted里配合setTimeout或Promise.then异步创建watch - 在自定义 Hook（composable）中返回
watch，且该 Hook 被多个组件复用 - 监听全局对象（如
window、document）或非响应式源（需配合watch的immediate: true+ 手动控制） - 使用
watchEffect时未保存stop，导致无法终止
这些情况下，Vue 完全不会自动清理，必须自己管理 stop。
? 不推荐依赖“自动销毁”的原因
- Vue 的自动清理只覆盖 setup() 中同步创建的
watch/watchEffect - 一旦监听器创建时机晚于 setup（比如在异步逻辑中），自动清理就失效
-
watchEffect尤其危险：不保存返回值 → 根本无法停止 → 潜在内存泄漏 - 组合式 API 的设计哲学是“显式优于隐式”，
stop就是这个原则的体现
? 补充：Vue 3.5+ 支持暂停/恢复（非销毁）
如果只是临时禁用，不是彻底停止，可用：
const { pause, resume } = watch(source, callback)
pause() // 暂停：数据照常更新，但不触发回调
resume() // 恢复：立即用最新值触发一次
适合防抖中途中断、表单步骤冻结等场景，比反复 stop + watch 更轻量。
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
