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

目录

• 1. 使用 this.$watch 创建的监听器
• 2. 在 watch 选项中定义的监听器
• 方法 1：使用 this.$watch 替代 watch 选项
• 方法 2：通过条件控制监听器的执行
• 3. 使用 Vue 3 的 watch 函数
• 总结

1. 使用 this.$watch 创建的监听器

如果你是通过 this.$watch 动态创建的监听器，this.$watch 会返回一个取消监听的函数，调用该函数即可取消监听

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

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

2. 在 watch 选项中定义的监听器

如果你是在组件的 watch 选项中定义的监听器，Vue 会在组件销毁时自动取消这些监听器，因此通常不需要手动取消。

如果你需要手动取消监听器，可以通过以下方式实现：

方法 1：使用 this.$watch 替代 watch 选项

将 watch 选项中的监听器改为在 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(); // 手动取消监听
      }
    },
  },
  beforeDestroy() {
    this.stopWatching(); // 在组件销毁前取消监听
  },
};

方法 2：通过条件控制监听器的执行

如果不想完全取消监听器，可以通过一个标志变量来控制监听器的执行。

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; // 停止监听
    },
  },
};

3. 使用 Vue 3 的 watch 函数

在 Vue 3 中，watch 是一个独立的函数，调用后会返回一个取消监听的函数。

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,
    };
  },
};

总结

• 动态创建的监听器（通过 this.$watch 或 Vue 3 的 watch 函数）：可以通过调用返回的取消函数来取消监听。
• watch 选项中定义的监听器：Vue 会在组件销毁时自动取消，如果需要手动取消，可以改用 this.$watch 或通过条件控制监听器的执行。
• Vue 3 的 watch 函数：直接调用返回的取消函数即可。

到此这篇关于vue的watch监听器取消的方法小结的文章就介绍到这了,更多相关vue watch监听器取消内容请搜索科站长以前的文章或继续浏览下面的相关文章希望大家以后多多支持科站长！