vue如何取消监听

在Vue中，移除watch监听的方法有两种，一种是通过将watch赋值给一个变量，然后在达到条件时调用该变量来终止监听；另一种是通过取消监听函数来实现。

Vue.js 是一种流行的 JavaScript 框架，它提供了一种声明式的、组件化的编程方式，使得开发者能够更加高效地构建交互式 Web 应用程序，在 Vue.js 中，我们可以使用事件监听器来响应用户的操作，例如点击按钮、输入文本等，有时候我们可能需要取消对某个事件的监听，以避免不必要的事件处理函数被执行，本文将介绍如何在 Vue.js 中取消事件监听器的绑定。

1. 使用 v-on 指令解绑事件监听器

在 Vue.js 2.x 版本中，我们可以使用 v-on 指令来绑定事件监听器，要解绑这个事件监听器，我们可以在元素上使用一个空的 v-on 表达式，如下所示：

<button v-on:click="handleClick">点击我</button>

new Vue({
  el: 'app',
  methods: {
    handleClick() {
      alert('按钮被点击了');
    }
  },
  beforeDestroy() {
    // 在组件销毁之前解绑事件监听器
    this.$off('click');
  }
});

在这个例子中，我们在 beforeDestroy 生命周期钩子中调用了 this.$off('click'),这将会解绑所有的点击事件监听器，请注意，这种方法只能解绑通过 v-on 指令绑定的事件监听器，对于其他类型的事件监听器(如原生 DOM 事件),我们需要使用其他方法来解绑。

2. 使用 v-once 指令和 $off 方法解绑事件监听器

在 Vue.js 3.x 版本中，我们引入了一个新的选项 v-once,用于只渲染一次元素，当我们使用 v-once 指令时，Vue.js 将不会重新渲染这个元素及其子元素，从而节省性能，这也意味着我们不能直接使用 $off 方法来解绑这个元素上的事件监听器，因为它们已经被移除了，相反，我们需要手动移除这些事件监听器。

下面是一个使用 v-once 指令的例子：

<div v-once id="myElement">这是一个只渲染一次的元素</div>

const myElement = document.getElementById('myElement');
myElement.addEventListener('click', handleClick);
function handleClick() {
  alert('元素被点击了');
}
// 在组件销毁之前解绑事件监听器
mounted() {
  myElement.removeEventListener('click', handleClick);
}

在这个例子中，我们在 mounted 生命周期钩子中调用了 myElement.removeEventListener('click', handleClick),这将会解绑元素上的点击事件监听器，需要注意的是，这种方法只适用于使用 v-once 指令的元素，对于其他类型的元素，我们需要使用其他方法来解绑事件监听器。

3. 通过修改数据属性来解绑事件监听器

在 Vue.js 3.x 版本中，我们还可以通过修改数据属性来解绑事件监听器，我们可以将一个布尔值属性(如 isListening)与事件监听器关联起来，当这个属性为 true 时，我们将添加事件监听器；当这个属性变为 false 时，我们将移除事件监听器，以下是一个示例：

<button v-if="isListening" @click="handleClick">点击我</button>
<button v-else @click="handleClick">点击我</button>

export default {
  data() {
    return {
      text: 'Hello Vue!',
      isListening: true
    }
  },
  methods: {
    handleClick() {
      alert('按钮被点击了');
    },
    toggleListening() {
      this.isListening = !this.isListening;
    }
  }
}