面试题，手动取消监听

vue2中，watch如何在监听一次后，就销毁

在 Vue.js 中，watch 监听器无法直接在监听一次之后自动销毁。然而，你可以通过在监听器内部手动注销（取消）监听来达到类似的效果。Vue 提供了 vm.$watch 方法来创建一个临时的 watch 监听器，你可以在监听器的回调函数中执行取消监听的操作。

以下是一个示例代码，演示了如何在监听一次之后手动取消监听：

代码中，watch 中的监听函数检查了一个标志位 hasWatchedOnce，以确定是否已经监听过一次。如果已经监听过一次且 watcher 对象存在，则调用 watcher 函数取消监听，并将 watcher 对象置为 null。这样，在监听到一次后，监听器就会自动销毁。

export default {
  data() {
    return {
      // 定义需要监听的数据
      valueToWatch: '',
      // 标志位，用于记录是否已经监听过一次
      hasWatchedOnce: false,
      // 用于存储 watcher 对象
      watcher: null
    };
  },
  watch: {
    valueToWatch(newValue, oldValue) {
      // 如果已经监听过一次且 watcher 对象存在，则取消监听
      if (this.hasWatchedOnce && this.watcher) {
        this.watcher(); // 执行 watcher 函数，取消监听
        this.watcher = null; // 将 watcher 对象置为 null，表示已经取消监听
      }
      
      // 执行监听一次后的逻辑
      console.log('监听到一次：', newValue);
      
      // 将标志位置为 true，表示已经监听过一次
      this.hasWatchedOnce = true;
    }
  },
  methods: {
    // 开始监听
    startWatching() {
      // 创建 watcher 对象，并存储到 watcher 变量中
      this.watcher = this.$watch('valueToWatch', this.valueToWatch);
    }
  }
};