【vue技巧】vue2 当页面卸载时，同时卸载watch事件

推荐一款AI网站，免费使用GPT3.5，戳此入👇：AI写作

在Vue 2中，当你在组件中使用watch来观察某个数据或计算属性时，Vue 会自动在组件被销毁时清理这些观察者（watchers）。这意味着，如果你是通过组件的watch选项来声明观察者的，通常你不需要手动清理。

export default {
  data() {
    return {
      someData: ''
    };
  },
  watch: {
    someData(newValue, oldValue) {
      // 响应 someData 的变化
    }
  }
  // 其他选项...
};

然而，如果你是通过this.$watch方法在组件的方法或生命周期钩子中动态添加观察者，你需要手动清理以避免内存泄漏。this.$watch方法返回一个停止观察函数（unwatch function），你可以在组件销毁时调用它来停止观察。

以下是如何注册和注销一个动态watch事件的例子：

export default {
  data() {
    return {
      someData: '',
      anotherData: ''
    };
  },
  created() {
    this.unwatch = this.$watch('someData', (newValue, oldValue) => {
      // 响应 someData 的变化
    });
  },
  beforeDestroy() {
    // 当组件销毁时，停止观察
    if (this.unwatch) {
      this.unwatch();
    }
  }
};

在这个例子中，this.$watch在created生命周期钩子中被调用，并返回一个函数this.unwatch。然后在beforeDestroy生命周期钩子中，我们调用this.unwatch()来停止观察someData的变化。

这种方法确保了即使是动态添加的观察者也能在组件销毁时被适当地清理，从而避免了潜在的内存泄漏问题。