1. 为什么要取消 Watch 监听？
在实际项目中，watch 本质上是一种长期订阅关系——就像你订阅了一个公众号，如果不手动取消，它就会源源不断地推送消息。
但问题在于，很多场景下我们并不需要它一直盯着。不加控制的话，它会在数据变化的整个生命周期内持续触发，这往往不是我们想要的。
合理地取消监听，主要有以下几个好处：
- 避免无意义的重复执行——有些监听只在初始化或某个阶段生效，继续监听只会重复跑逻辑，白白浪费资源。
- 减少数据变化带来的逻辑污染——后续状态变化可能触发已经过期的逻辑，导致数据被意外修改，这种“脏数据”问题相当棘手。
- 避免内存泄漏等性能问题——尤其是在非组件作用域（如 composable、service）中，未销毁的 watch 可能长期驻留内存，成为性能隐患。
once 和手动取消监听的区别
Vue 3 贴心地提供了 once 选项，用来监听一次后自动销毁。那么，它和手动取消监听（stop）到底有什么区别？
once
- 只监听一次
- 触发后自动销毁
- 适合初始化、首次赋值等简单场景
- 相对“死板”，无法灵活判断是否真的是你期望的数据
手动取消监听（stop）
- 监听可以持续存在
- 由开发者自行决定何时终止
- 更灵活，适合复杂判断条件
一句话总结：once 是“宠儿”，自动帮你收尾；stop 是“管家”，什么时候关门你说了算。
2. Vue 2 中如何取消 Watch 监听
在 Vue 2 中，只有通过 this.$watch 创建的监听才能被手动取消。选项式写法的 watch: {} 是没有返回值的，意味着你无法直接干预它的生命周期。
示例
const stop = this.$watch(
'count',
function (nval) {
if (nval === 3) {
stop()
}
})
const handleStopWatch = () => {
stop()
}
这里有一个关键点需要记住：
Vue 2 的选项式写法（watch: {}）是没有返回值的，因此无法手动取消监听。
watch: {
count(val) {
// ❌ 这种方式无法取消
}
}
如果你有「阶段性监听」或「一次性逻辑」的需求，就必须使用 this.$watch。这个限制在 Vue 2 时代确实让不少开发者踩过坑。
3. Vue 3 中如何取消 Watch 监听
Vue 3 的 Composition API 对这点做了明显优化——watch 本身就会返回一个停止监听的函数，不再需要绕道 this.$watch。
示例
const count = ref(1)
const stop = watch(
count,
(nval) => {
if (nval === 3) {
stop()
}
})
const handleStopWatch = () => {
stop()
}
可以看到，Vue 3 的写法在语义上更加清晰：
watch创建监听- 返回的
stop函数用于取消监听 - 逻辑更集中，也更安全
另外，如果你只需要监听一次，可以直接用 once: true 选项，连手动调用 stop 都省了。
4. 总结
watch本质是订阅关系，不是越多越好，也不是越持久越好- 一次性 / 阶段性逻辑，应及时销毁监听，避免副作用
- Vue 2 中只能通过
this.$watch取消监听，选项式写法做不到 - Vue 3 中
watch天然支持stop，也可以直接使用once，两种方式各有用武之地
监听不是一直盯着，而是完成使命后及时退场。——这才是高效开发的正确姿势。
