如何取消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

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

到此这篇关于如何取消Vue Watch监听的方法示例的文章就介绍到这了,更多相关取消Vue Watch监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论