vue中为什么需要手动移除事件监听器,DOM 事件监听器_vue 事件不销毁 缺点

vue2和vue3中组件销毁都会移除事件监听器：

• 组件销毁自动移除的监听器指的是同步创建的各种watcher
• 对于异步创建的watcher，需要手动移除
• 对于dom事件监听器，比如使用addEventListener创建的监听器，需要手动移除
• eventBus方式总线订阅事件，需要手动移除

不移除可能造成内存泄漏！

vue2

从vue2的生命周期知道,destroyed钩子，实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

如下代码，需要手动停止interval

<template>
  <button @click="handleClick">start</button>
</template>
<script>
export default {
  data() {
    return {
      interval: null,
    };
  },
  beforeDestroy(){
    this.handleStop()
  },
  methods: {
    handleClick() {
      this.interval = setInterval(() => {
        //some actions
        console.log("interval");
      }, 2000);
    },
    handleStop() {
      clearInterval(this.interval);
      this.interval = null;
    },
  },
};
</script>

vue3

一般情况下，一个组件被销毁或者卸载后，监听器也会被停止，而不需要我们手动去关闭监听器。但是总是有一些特殊情况，即使组件卸载了，但是监听器依然存在，这个时候其实式需要手动关闭它的，否则容易造成内存泄漏。

下面这中写法，就需要手动停止监听器：

<script setup>
import { watchEffect } from 'vue'
// 自动停止
watchEffect(() => {})
// 不会自动停止
setTimeout(() => {
  watchEffect(() => {})
}, 200)
</script>

上段代码中采用异步的方式创建了一个监听器，这个时候监听器没有与当前组件绑定，所以即使组件销毁了，监听器依然存在，当组件销毁时，监听器会继续引用该组件，防止其被垃圾回收。其实就是闭包。

用如下方法关闭：

const unwatch = watchEffect(() => {})
// 关闭监听器
unwatch()

官网解释watchEffect