vue的watch监听器取消的方法小结

export default {
  data() {
    return {
      count: 0,
    };
  },
  created() {
    // 动态创建监听器
    const unwatch = this.$watch(
      'count', // 监听的属性
      (newVal, oldVal) => {
        console.log('count changed:', newVal);
      }
    );

    // 取消监听
    unwatch(); // 调用返回的函数即可取消监听
  },
};

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(); // 手动取消监听
      }
    },
  },
  beforeDestroy() {
    this.stopWatching(); // 在组件销毁前取消监听
  },
};

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

import { ref, watch } from 'vue';

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

    // 创建监听器
    const stopWatch = watch(count, (newVal, oldVal) => {
      console.log('count changed:', newVal);
    });

    // 取消监听
    stopWatch();

    return {
      count,
    };
  },
};