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

    // 取消監(jiān)聽(tīng)
    unwatch(); // 調(diào)用返回的函數(shù)即可取消監(jiān)聽(tīng)
  },
};

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(); // 手動(dòng)取消監(jiān)聽(tīng)
      }
    },
  },
  beforeDestroy() {
    this.stopWatching(); // 在組件銷毀前取消監(jiān)聽(tīng)
  },
};

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

import { ref, watch } from 'vue';

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

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

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

    return {
      count,
    };
  },
};