vue的watch監(jiān)聽器取消的方法小結

更新時間：2025年02月07日 08:44:40 作者：海岸邊的破木船

在 Vue 中,watch 監(jiān)聽器是可以取消的,取消監(jiān)聽器的方式取決于你是如何使用 watch 的,所以本文給大家餓介紹了vue的watch監(jiān)聽器取消的方法,并通過代碼示例講解的非常詳細,需要的朋友可以參考下

1. 使用 this.$watch 創(chuàng)建的監(jiān)聽器

如果你是通過 this.$watch 動態(tài)創(chuàng)建的監(jiān)聽器，this.$watch 會返回一個取消監(jiān)聽的函數，調用該函數即可取消監(jiān)聽

export default {
  data() {
    return {
      count: 0,
    };
  },
  created() {
    // 動態(tài)創(chuàng)建監(jiān)聽器
    const unwatch = this.$watch(
      'count', // 監(jiān)聽的屬性
      (newVal, oldVal) => {
        console.log('count changed:', newVal);
      }
    );

    // 取消監(jiān)聽
    unwatch(); // 調用返回的函數即可取消監(jiān)聽
  },
};

2. 在 watch 選項中定義的監(jiān)聽器

如果你是在組件的 watch 選項中定義的監(jiān)聽器，Vue 會在組件銷毀時自動取消這些監(jiān)聽器，因此通常不需要手動取消。

如果你需要手動取消監(jiān)聽器，可以通過以下方式實現：

方法 1：使用 this.$watch 替代 watch 選項

將 watch 選項中的監(jiān)聽器改為在 created 或 mounted 鉤子中使用 this.$watch，然后保存返回的取消函數。

export default {
  data() {
    return {
      count: 0,
    };
  },
  created() {
    this.unwatchCount = this.$watch(
      'count',
      (newVal, oldVal) => {
        console.log('count changed:', newVal);
      }
    );
  },
  methods: {
    stopWatching() {
      if (this.unwatchCount) {
        this.unwatchCount(); // 手動取消監(jiān)聽
      }
    },
  },
  beforeDestroy() {
    this.stopWatching(); // 在組件銷毀前取消監(jiān)聽
  },
};

方法 2：通過條件控制監(jiān)聽器的執(zhí)行

如果不想完全取消監(jiān)聽器，可以通過一個標志變量來控制監(jiān)聽器的執(zhí)行。

export default {
  data() {
    return {
      count: 0,
      isWatching: true, // 控制監(jiān)聽器的標志
    };
  },
  watch: {
    count(newVal, oldVal) {
      if (this.isWatching) {
        console.log('count changed:', newVal);
      }
    },
  },
  methods: {
    stopWatching() {
      this.isWatching = false; // 停止監(jiān)聽
    },
  },
};

3. 使用 Vue 3 的 watch 函數

在 Vue 3 中，watch 是一個獨立的函數，調用后會返回一個取消監(jiān)聽的函數。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 創(chuàng)建監(jiān)聽器
    const stopWatch = watch(count, (newVal, oldVal) => {
      console.log('count changed:', newVal);
    });

    // 取消監(jiān)聽
    stopWatch();

    return {
      count,
    };
  },
};

總結

動態(tài)創(chuàng)建的監(jiān)聽器（通過 this.$watch 或 Vue 3 的 watch 函數）：可以通過調用返回的取消函數來取消監(jiān)聽。
watch 選項中定義的監(jiān)聽器：Vue 會在組件銷毀時自動取消，如果需要手動取消，可以改用 this.$watch 或通過條件控制監(jiān)聽器的執(zhí)行。
Vue 3 的 watch 函數：直接調用返回的取消函數即可。

到此這篇關于vue的watch監(jiān)聽器取消的方法小結的文章就介紹到這了,更多相關vue watch監(jiān)聽器取消內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: