Vue 使用中的内存泄漏【推荐】

什么是内存泄漏

内存泄漏指的是在程序运行中，分配的内存没有释放，这样就会造成内存占用过高的问题。在 Vue 中，内存泄漏指的是在使用过程中，一些会影响页面性能的事件监听器、订阅等占用内存的功能没有被释放，最终导致页面卡顿、甚至崩溃。

如何解决内存泄漏问题

取消事件监听

在 Vue 中，无论是使用 @click、@scroll 等内置事件，还是通过 this.$refs.xx.addEventListener() 等自定义事件，都需要手动取消监听以避免内存泄漏。

示例代码：

<template>
  <button @click="clickHandler"></button>
</template>

<script>
export default {
  mounted() {
    window.addEventListener("scroll", this.scrollHandler);
  },

  beforeDestroy() {
    window.removeEventListener("scroll", this.scrollHandler);
  },

  methods: {
    clickHandler() {
      // do something
    },

    scrollHandler() {
      // do something
    }
  }
}
</script>

在上面的示例中，我们在 mounted 阶段注册了 window 的 scroll 事件，并在 beforeDestroy 生命周期中取消了事件监听，确保在组件销毁时事件会被正确地移除。

取消订阅

在 Vue 中，常用于状态管理的库如 Vuex 和 EventBus 就有可能会存在订阅事件而没有取消订阅的问题。因此，我们需要在合适的时候取消订阅。

示例代码：

// EventBus.js
import Vue from "vue";
export default new Vue();

// component1.vue
import EventBus from "./EventBus.js";
export default {
  mounted() {
    EventBus.$on("event", this.handler);
  },

  beforeDestroy() {
    EventBus.$off("event", this.handler);
  },

  methods: {
    handler() {
      // do something
    }
  }
};

在上面的示例中，我们定义了 EventBus 来进行组件之间的通信，并在 component1.vue 中订阅了 event 事件。在 beforeDestroy 生命周期中，我们取消了该组件对 event 事件的订阅，确保在组件销毁时订阅会被正确地取消。