如何取消Vue Watch监听

1. 为什么要取消 Watch 监听？

在实际项目中，watch 本质上是一种长期订阅关系 。

如果不加控制，它会在数据变化的整个生命周期内持续触发，这在很多场景下并不是我们想要的。

合理地取消监听，主要有以下几个好处：

• 避免无意义的重复执行
  有些监听只在初始化或某个阶段生效，继续监听只会重复跑逻辑。
• 减少数据变化带来的逻辑污染
  后续状态变化可能触发过期逻辑，导致数据被意外修改。
• 避免内存泄漏等性能问题
  尤其是在非组件作用域（如 composable、service）中，未销毁的 watch 可能长期驻留内存。

---

once 和手动取消监听的区别

Vue 3 提供了 once 选项，用来监听一次后自动销毁：

• once

  • 只监听一次
  • 触发后自动销毁
  • 适合初始化、首次赋值等简单场景
  • 相对"死板"，无法灵活判断是否是期望的数据

• 手动取消监听（stop）

  • 监听可以持续存在
  • 由开发者自行决定何时终止
  • 更灵活，适合复杂判断条件

---

2. Vue 2 中如何取消 Watch 监听

在 Vue 2 中，只有通过 this.$watch 创建的监听才能被手动取消。

示例

const stop = this.$watch(
  'count',
  function (nval) {
    if (nval === 3) {
      stop()
    }
  }
)

const handleStopWatch = () => {
  stop()
}

这里需要注意一个关键点：

Vue 2 的选项式写法（watch: {}）是没有返回值的，因此无法手动取消监听。

watch: {
  count(val) {
    // ❌ 这种方式无法取消
  }
}

如果你有「阶段性监听」或「一次性逻辑」的需求，就必须使用 this.$watch。

---

3. Vue 3 中如何取消 Watch 监听

Vue 3（Composition API）对这点做了明显优化：
watch 本身就会返回一个停止监听的函数。

示例

const count = ref(1)

const stop = watch(
  count,
  (nval) => {
    if (nval === 3) {
      stop()
    }
  }
)

const handleStopWatch = () => {
  stop()
}

可以看到，Vue 3 的写法在语义上更加清晰：

• watch 创建监听
• 返回的 stop 函数用于取消监听
• 逻辑更集中，也更安全

---

4. 总结

• watch 本质是订阅关系，不是越多越好
• 一次性 / 阶段性逻辑，应及时销毁监听
• Vue 2 中只能通过 this.$watch 取消监听
• Vue 3 中 watch 天然支持 stop，也可以直接使用 once

监听不是一直盯着，而是完成使命后及时退场。