如何在 Vue 中移除原生 JavaScript 事件監(jiān)聽(tīng)器？

發(fā)布時(shí)間：2025-11-10 文章來(lái)源：本站瀏覽次數(shù)：440

在 Vue 中移除原生 JavaScript 事件監(jiān)聽(tīng)器（即通過(guò) addEventListener 綁定的事件），核心原則與原生 JS 一致：在組件合適的生命周期鉤子中，使用 removeEventListener 移除，且確保事件類型、回調(diào)函數(shù)引用、捕獲階段參數(shù)與綁定時(shí)代完全匹配。以下是針對(duì) Vue 3 和 Vue 2 的具體實(shí)現(xiàn)方法及避坑指南：

一、核心前提：確保綁定與移除的參數(shù)完全一致

移除原生事件監(jiān)聽(tīng)器的關(guān)鍵是 “參數(shù)三匹配”：

事件類型（如 click、scroll）一致；
回調(diào)函數(shù)引用一致（不能用匿名函數(shù)）；
捕獲階段參數(shù)（useCapture，默認(rèn) false）一致。

錯(cuò)誤示例（匿名函數(shù)無(wú)法移除）：

javascript

運(yùn)行

// 綁定匿名函數(shù)，引用不唯一
boxRef.value.addEventListener('click', () => console.log('點(diǎn)擊'));
// 移除時(shí)找不到相同引用，無(wú)效
boxRef.value.removeEventListener('click', () => console.log('點(diǎn)擊'));

正確示例（具名函數(shù)確保引用一致）：

javascript

運(yùn)行

// 定義具名函數(shù)
function handleClick() {
  console.log('點(diǎn)擊');
}
// 綁定
boxRef.value.addEventListener('click', handleClick);
// 移除（參數(shù)完全匹配）
boxRef.value.removeEventListener('click', handleClick);

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

Vue 3 中需通過(guò) ref 獲取 DOM 元素引用，在組件掛載時(shí)綁定事件，在卸載前（onUnmounted）移除，確保組件銷毀時(shí)事件被清理。

1. 基礎(chǔ)用法：移除組件內(nèi) DOM 元素的原生事件

vue











<template>
  <div ref="box" class="box">點(diǎn)擊或移動(dòng)鼠標(biāo)</div>
</template>

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

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

// 2. 定義具名回調(diào)函數(shù)（確保引用唯一）
function handleClick() {
  console.log('盒子被點(diǎn)擊');
}

function handleMouseMove(e) {
  console.log('鼠標(biāo)位置：', e.clientX, e.clientY);
}

// 3. 組件掛載時(shí)綁定事件
onMounted(() => {
  if (box.value) {
    box.value.addEventListener('click', handleClick); // 綁定 click
    box.value.addEventListener('mousemove', handleMouseMove); // 綁定 mousemove
  }
});

// 4. 組件卸載時(shí)移除所有事件（關(guān)鍵步驟）
onUnmounted(() => {
  if (box.value) {
    box.value.removeEventListener('click', handleClick);
    box.value.removeEventListener('mousemove', handleMouseMove);
  }
});
</script>

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

2. 處理捕獲階段的事件移除

若綁定事件時(shí)使用了捕獲階段（addEventListener 第三個(gè)參數(shù)為 true），移除時(shí)必須傳入相同參數(shù)：

javascript

運(yùn)行

onMounted(() => {
  // 綁定捕獲階段的 click 事件
  box.value.addEventListener('click', handleClick, true);
});

onUnmounted(() => {
  // 移除時(shí)必須傳入第三個(gè)參數(shù) true，否則無(wú)效
  box.value.removeEventListener('click', handleClick, true);
});

3. 批量移除多個(gè)原生事件

若組件內(nèi)綁定了多個(gè)原生事件，可通過(guò)數(shù)組批量管理，遍歷移除：

vue











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

const box = ref(null);

// 存儲(chǔ)所有原生事件配置（類型 + 回調(diào) + 捕獲階段）
const domEvents = [
  { type: 'click', handler: handleClick, useCapture: false },
  { type: 'mousemove', handler: handleMouseMove, useCapture: false },
  { type: 'mouseleave', handler: handleMouseLeave, useCapture: true }
];

function handleClick() { /* ... */ }
function handleMouseMove() { /* ... */ }
function handleMouseLeave() { /* ... */ }

onMounted(() => {
  if (box.value) {
    domEvents.forEach(({ type, handler, useCapture }) => {
      box.value.addEventListener(type, handler, useCapture);
    });
  }
});

onUnmounted(() => {
  if (box.value) {
    domEvents.forEach(({ type, handler, useCapture }) => {
      box.value.removeEventListener(type, handler, useCapture);
    });
  }
});
</script>

三、Vue 2（選項(xiàng)式 API）：在 `beforeDestroy` 中移除

Vue 2 中通過(guò) $refs 獲取 DOM 元素，在 mounted 中綁定事件，在 beforeDestroy 中移除，回調(diào)函數(shù)定義在 methods 中確保引用穩(wěn)定。

1. 基礎(chǔ)用法

vue











<template>
  <div ref="box" class="box">點(diǎn)擊我</div>
</template>

<script>
export default {
  methods: {
    // 回調(diào)函數(shù)定義在 methods 中，引用唯一
    handleClick() {
      console.log('盒子被點(diǎn)擊');
    }
  },
  mounted() {
    // 組件掛載后綁定事件
    this.$refs.box.addEventListener('click', this.handleClick);
  },
  beforeDestroy() {
    // 組件銷毀前移除事件（關(guān)鍵）
    this.$refs.box.removeEventListener('click', this.handleClick);
  }
};
</script>

2. 處理動(dòng)態(tài) DOM 元素的事件移除

若 DOM 元素通過(guò) v-if 控制顯示 / 隱藏，需在元素銷毀前（如 beforeDestroy）判斷元素是否存在，避免報(bào)錯(cuò)：

javascript

運(yùn)行

beforeDestroy() {
  // 先判斷 DOM 是否存在，再移除事件
  if (this.$refs.box) {
    this.$refs.box.removeEventListener('click', this.handleClick);
  }
}

四、避坑指南：常見(jiàn)錯(cuò)誤與解決方案

1. 回調(diào)函數(shù)引用不一致（常見(jiàn)）

問(wèn)題：綁定匿名函數(shù)或動(dòng)態(tài)創(chuàng)建的函數(shù)，導(dǎo)致 removeEventListener 找不到相同引用。
解決方案：始終使用具名函數(shù)（如 function handleClick()）或在組件實(shí)例上保存函數(shù)引用（如 Vue 2 的 methods、Vue 3 的 setup 內(nèi)定義）。

2. 遺漏捕獲階段參數(shù)

問(wèn)題：綁定事件時(shí)用了 useCapture: true，移除時(shí)未傳入，導(dǎo)致移除失敗。
解決方案：移除時(shí)嚴(yán)格保持 useCapture 參數(shù)與綁定一致。

3. 組件卸載時(shí) DOM 已不存在

問(wèn)題：組件內(nèi) DOM 通過(guò) v-if 銷毀，或組件卸載時(shí) DOM 已被移除，此時(shí)調(diào)用 removeEventListener 會(huì)報(bào)錯(cuò)。
解決方案：移除前先判斷 DOM 元素是否存在（如 if (box.value)）。

4. 混淆 Vue 指令與原生事件

問(wèn)題：通過(guò) Vue 的 @click 綁定的事件，無(wú)需手動(dòng)移除（Vue 會(huì)自動(dòng)清理），但如果同時(shí)用 addEventListener 綁定了相同事件，需手動(dòng)移除。

vue

  <template>
  <!-- Vue 指令綁定的事件：自動(dòng)移除 -->
  <button @click="vueClick">Vue 指令點(diǎn)擊</button>
  <!-- 原生 addEventListener 綁定的事件：需手動(dòng)移除 -->
  <button ref="nativeBtn">原生事件點(diǎn)擊</button>
</template>

總結(jié)：Vue 中移除原生 JS 事件監(jiān)聽(tīng)器的核心步驟

綁定階段：用 ref（Vue 3）/$refs（Vue 2）獲取 DOM 引用，使用具名函數(shù)通過(guò) addEventListener 綁定事件，記錄事件類型、回調(diào)、捕獲階段參數(shù)。
移除階段：在組件卸載鉤子（onUnmounted Vue 3 /beforeDestroy Vue 2）中，通過(guò) removeEventListener 移除事件，確保參數(shù)與綁定完全一致。
兜底處理：移除前判斷 DOM 是否存在，避免報(bào)錯(cuò)；批量事件通過(guò)數(shù)組管理，遍歷移除提高效率。

遵循以上步驟，可徹底避免原生事件監(jiān)聽(tīng)器殘留導(dǎo)致的內(nèi)存泄漏問(wèn)題。

上一條：如何確保第三方庫(kù)事件綁定...

下一條：如何移除通過(guò)$emit觸...

如何在 Vue 中移除原生 JavaScript 事件監(jiān)聽(tīng)器？

一、核心前提：確保綁定與移除的參數(shù)完全一致

二、Vue 3（組合式 API）：在 onUnmounted 中移除