vue中为什么需要手动移除事件监听器,DOM 事件监听器

无心使然云中漫步

已于 2023-12-10 23:43:39 修改

阅读量1.8k

点赞数 15

分类专栏： vue javascript 文章标签： vue.js javascript 前端

于 2023-12-10 23:38:38 首次发布

本文链接：https://blog.csdn.net/weixin_56624286/article/details/134916852

版权

vue 同时被 2 个专栏收录

53 篇文章

订阅专栏

javascript

13 篇文章

订阅专栏

文章讨论了Vue2和Vue3中组件销毁时如何正确处理事件监听器，包括手动移除DOM事件和eventBus订阅，避免内存泄漏。特别强调了在Vue3中，尽管通常组件销毁会自动停止监听器，但在异步场景下仍需手动关闭，以防内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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