Vue如何优雅地进行事件解绑和解绑

使用vue的同学一定对事件的绑定和解绑再熟悉不过了，以开启scroll事件为例，我们一般的写法是这样的：

export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHanlder);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.scrollHanlder);
  },
  method: {
    scrollHanlder() {
      // todo something...
    },
  },
};
</script>

这样的写法是没有问题的，但是如果我们在mounted中进行了事件解绑，但是在beforeDestroy中忘记了事件解绑，问题就会变得很严重，导致项目运行久了之后变得卡顿和内存溢出。为了避免在beforeDestroy中忘记关闭资源，我们可以使用vue中的hook，将事件绑定和解绑写在一起，提高代码阅读性和减少bug的出现。写法如下：

export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHanlder);
    // 使用$once和hook实现
    this.$once("hook:beforeDestroy", () => {
      window.removeEventListener("scroll", this.scrollHanlder);
    });
  },
  beforeDestroy() {
  },
  method: {
    scrollHanlder() {
      // todo something...
    },
  },
};
</script>