如何取消VueWatch监听的方法示例

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，两种方式各有用武之地

监听不是一直盯着，而是完成使命后及时退场。——这才是高效开发的正确姿势。