快捷導(dǎo)航

如何取消Vue Watch監(jiān)聽的方法示例

更新時(shí)間：2026年01月07日 08:22:22 作者：我的寫法有點(diǎn)潮

在實(shí)際項(xiàng)目中,watch 本質(zhì)上是一種長期訂閱關(guān)系,如果不加控制,它會(huì)在數(shù)據(jù)變化的整個(gè)生命周期內(nèi)持續(xù)觸發(fā),這在很多場(chǎng)景下并不是我們想要的,所以我們有時(shí)會(huì)想取消Vue Watch監(jiān)聽,因此本文給大家介紹了取消Vue Watch監(jiān)聽的方法示例,需要的朋友可以參考下

1. 為什么要取消 Watch 監(jiān)聽？

在實(shí)際項(xiàng)目中，watch 本質(zhì)上是一種長期訂閱關(guān)系。
如果不加控制，它會(huì)在數(shù)據(jù)變化的整個(gè)生命周期內(nèi)持續(xù)觸發(fā)，這在很多場(chǎng)景下并不是我們想要的。

合理地取消監(jiān)聽，主要有以下幾個(gè)好處：

避免無意義的重復(fù)執(zhí)行
有些監(jiān)聽只在初始化或某個(gè)階段生效，繼續(xù)監(jiān)聽只會(huì)重復(fù)跑邏輯。
減少數(shù)據(jù)變化帶來的邏輯污染
后續(xù)狀態(tài)變化可能觸發(fā)過期邏輯，導(dǎo)致數(shù)據(jù)被意外修改。
避免內(nèi)存泄漏等性能問題
尤其是在非組件作用域（如 composable、service）中，未銷毀的 watch 可能長期駐留內(nèi)存。

once 和手動(dòng)取消監(jiān)聽的區(qū)別

Vue 3 提供了 once 選項(xiàng)，用來監(jiān)聽一次后自動(dòng)銷毀：

once

只監(jiān)聽一次
觸發(fā)后自動(dòng)銷毀
適合初始化、首次賦值等簡(jiǎn)單場(chǎng)景
相對(duì)“死板”，無法靈活判斷是否是期望的數(shù)據(jù)

手動(dòng)取消監(jiān)聽（stop）

監(jiān)聽可以持續(xù)存在
由開發(fā)者自行決定何時(shí)終止
更靈活，適合復(fù)雜判斷條件

2. Vue 2 中如何取消 Watch 監(jiān)聽

在 Vue 2 中，只有通過 this.$watch 創(chuàng)建的監(jiān)聽才能被手動(dòng)取消。

示例

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

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

這里需要注意一個(gè)關(guān)鍵點(diǎn)：

Vue 2 的選項(xiàng)式寫法（watch: {}）是沒有返回值的，因此無法手動(dòng)取消監(jiān)聽。

watch: {
  count(val) {
    // ? 這種方式無法取消
  }
}

如果你有「階段性監(jiān)聽」或「一次性邏輯」的需求，就必須使用 this.$watch。

3. Vue 3 中如何取消 Watch 監(jiān)聽

Vue 3（Composition API）對(duì)這點(diǎn)做了明顯優(yōu)化：
watch 本身就會(huì)返回一個(gè)停止監(jiān)聽的函數(shù)。

示例

const count = ref(1)

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

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

可以看到，Vue 3 的寫法在語義上更加清晰：