Vue 组件中的原生事件监听器需要手动销毁吗

问题

在 Vue 组件中使用 addEventListener 添加的原生 DOM 事件监听器，需要手动销毁吗？

解答

需要手动移除。如果不移除，会导致以下问题：

内存泄漏

监听器会持有 DOM 元素的引用，即使元素已被移除，垃圾回收机制也无法回收这些元素，造成内存泄漏。

意外行为

组件销毁后，监听器仍会响应事件，可能导致错误或异常行为。

性能下降

频繁创建和销毁组件时，未移除的监听器会不断堆积，影响应用性能。

正确的做法

利用 Vue 生命周期钩子添加和移除监听器：

<template>
  <div ref="myElement">点击我</div>
</template>

<script>
export default {
  mounted() {
    // 组件挂载时添加监听器
    this.$refs.myElement.addEventListener('click', this.handleClick);
  },
  beforeDestroy() {
    // 组件销毁前移除监听器
    this.$refs.myElement.removeEventListener('click', this.handleClick);
  },
  methods: {
    handleClick(event) {
      console.log('元素被点击');
    }
  }
}
</script>

关键点

• 原生 addEventListener 添加的监听器不会自动销毁
• 必须在 beforeDestroy 钩子中手动调用 removeEventListener
• 移除监听器时需要传入相同的函数引用，不能使用匿名函数
• 不移除会导致内存泄漏和性能问题