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

更新時間：2026年01月07日 08:22:22 作者：我的寫法有點潮

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

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

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

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

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

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

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

once

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

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

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

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

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

示例

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

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

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

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

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

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

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

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

示例

const count = ref(1)

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

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

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