如何在 Vue 中移除原生 JavaScript 事件监听器？

发表日期：2025-11-11

在 Vue 中移除原生 JavaScript 事件监听器（即通过 addEventListener 绑定的事件），核心原则与原生 JS 一致：在组件合适的生命周期钩子中，使用 removeEventListener 移除，且确保事件类型、回调函数引用、捕获阶段参数与绑定时代完全匹配。以下是针对 Vue 3 和 Vue 2 的具体实现方法及避坑指南：

一、核心前提：确保绑定与移除的参数完全一致

移除原生事件监听器的关键是 “参数三匹配”：

事件类型（如 click、scroll）一致；
回调函数引用一致（不能用匿名函数）；
捕获阶段参数（useCapture，默认 false）一致。

错误示例（匿名函数无法移除）：

						javascript
					
						运行
					
// 绑定匿名函数，引用不唯一 boxRef.value.addEventListener('click', () => console.log('点击')); // 移除时找不到相同引用，无效 boxRef.value.removeEventListener('click', () => console.log('点击'));

正确示例（具名函数确保引用一致）：

						javascript
					
						运行
					
// 定义具名函数 function handleClick() { console.log('点击'); } // 绑定 boxRef.value.addEventListener('click', handleClick); // 移除（参数完全匹配） boxRef.value.removeEventListener('click', handleClick);

二、Vue 3（组合式 API）：在 onUnmounted 中移除

Vue 3 中需通过 ref 获取 DOM 元素引用，在组件挂载时绑定事件，在卸载前（onUnmounted）移除，确保组件销毁时事件被清理。

1. 基础用法：移除组件内 DOM 元素的原生事件

						vue
					
<template>
  <div ref="box" class="box">点击或移动鼠标</div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

// 1. 获取 DOM 引用
const box = ref(null);

// 2. 定义具名回调函数（确保引用唯一）
function handleClick() {
  console.log('盒子被点击');
}

function handleMouseMove(e) {
  console.log('鼠标位置：', e.clientX, e.clientY);
}

// 3. 组件挂载时绑定事件
onMounted(() => {
  if (box.value) {
    box.value.addEventListener('click', handleClick); // 绑定 click
    box.value.addEventListener('mousemove', handleMouseMove); // 绑定 mousemove
  }
});

// 4. 组件卸载时移除所有事件（关键步骤）
onUnmounted(() => {
  if (box.value) {
    box.value.removeEventListener('click', handleClick);
    box.value.removeEventListener('mousemove', handleMouseMove);
  }
});
</script>

<style>
.box { width: 200px; height: 200px; background: #eee; }
</style>