Vue 3 中 watch 自动清理仅限 setup 或生命周期钩子内同步调用；异步、条件分支或手动保存 stop 函数时需显式调用 stop。推荐在 onBeforeUnmount 统一清理。
在 Vue 3 的 Composition API 中，watch 返回一个停止监听的函数（stop function），用于手动取消响应式监听。组件卸载（unmount）时，Vue 会自动清理大部分 watch，但**仅限于在 setup() 或生命周期钩子中直接调用的 watch** —— 它们会被自动绑定到当前组件实例，并在组件销毁时自动调用 stop 函数。
如果你是在某些特殊场景下（比如在异步回调、条件分支、或非 setup 上下文）手动保存并延迟调用 watch，或者使用了 { immediate: true, flush: 'post' } 等可能跨生命周期的配置，则不能完全依赖自动清理，需要主动管理。
✅ 自动清理生效的常见情况
以下写法 Vue 会自动帮你 stop：
- 在
setup()顶层同步调用watch() - 在
onMounted、onBeforeUnmount等组合式生命周期钩子中调用 - 没有把返回的 stop 函数赋值给变量，或虽赋值但未手动调用
示例（无需手动 stop）：
setup() {
const count = ref(0)
watch(count, (newVal) => {
console.log('count changed:', newVal)
})
// ✅ 组件卸载时自动清理
}⚠️ 需要手动调用 stop 的典型场景
以下情况 Vue 不会自动清理，必须自己调用返回的 stop 函数：
- 你在某个条件块里创建 watch（如
if (someFlag) watch(...)），且该 watch 可能被跳过或多次创建 - 你把 stop 函数保存起来，准备稍后控制（比如响应用户操作暂停监听）
- 你在
setTimeout、Promise.then、事件回调等“脱离当前 setup 执行流”的地方调用 watch - 你使用了
watchEffect并显式保存了 stop 函数（同理）
示例（需手动清理）：
setup() {
const count = ref(0)
let stopWatch
<p>onMounted(() => {
stopWatch = watch(count, () => {
console.log('watching...')
})
})</p><p>onBeforeUnmount(() => {
stopWatch && stopWatch() // ✅ 必须手动调用
})
}? 推荐做法：统一在 onBeforeUnmount 清理
即使 Vue 大概率已帮你清理，为保险起见，尤其在复杂逻辑或可复用逻辑中，建议显式管理：
- 将所有手动创建的 watch / watchEffect 的 stop 函数存入数组
- 在
onBeforeUnmount中遍历调用 - 避免重复 stop（调用多次无副作用，但可加 guard）
示例：
setup() {
const count = ref(0)
const stops = []
<p>stops.push(watch(count, () => {}))
stops.push(watchEffect(() => {}))</p><p>onBeforeUnmount(() => {
stops.forEach(stop => stop())
})
}? 补充：watch 和 watchEffect 的 stop 行为一致
两者返回的函数类型相同，调用方式也一样：stop()。区别只在于创建时机和响应逻辑，清理机制完全一致。
不复杂但容易忽略 —— 关键是分清“谁创建、谁负责”。Vue 负责 setup 内同步创建的 watch；你自己创建的、延迟创建的、动态创建的，就由你自己收尾。
