如何在Vue中正確移除事件監(jiān)聽？

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

1. 基礎用法（監(jiān)聽window/document事件）

<template>
  <div>監(jiān)聽窗口大小變化</div>
</template>

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

// 1. 定義具名回調函數（確保整個組件生命周期內引用唯一）
function handleResize() {
  console.log('窗口大小變化：', window.innerWidth);
}

// 2. 組件掛載時添加事件監(jiān)聽
onMounted(() => {
  window.addEventListener('resize', handleResize);
});

// 3. 組件卸載時移除監(jiān)聽（關鍵步驟）
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

2. 監(jiān)聽組件內部 DOM 元素事件

<template>
  <button ref="myButton">點擊按鈕</button>
</template>

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

// 獲取DOM引用
const myButton = ref(null);

// 定義回調函數
function handleClick() {
  console.log('按鈕被點擊');
}

onMounted(() => {
  // 確保DOM已掛載（myButton.value存在）
  myButton.value.addEventListener('click', handleClick);
});

onUnmounted(() => {
  // 組件卸載前移除監(jiān)聽
  myButton.value.removeEventListener('click', handleClick);
});
</script>

3. 處理動態(tài)回調（依賴響應式數據）

<template>
  <div>計數：{{ count }}</div>
</template>

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

const count = ref(0);

// 用useCallback緩存回調函數，依賴變化時才重新創(chuàng)建
const handleScroll = useCallback(() => {
  // 依賴響應式數據count
  console.log('滾動時計數：', count.value);
}, [count]); // 當count變化時，函數重新創(chuàng)建

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

二、Vue 2（選項式 API）：在beforeDestroy中移除

1. 監(jiān)聽全局事件（window/document）

<template>
  <div>監(jiān)聽滾動事件</div>
</template>

<script>
export default {
  methods: {
    // 回調函數定義在methods中，引用唯一
    handleScroll() {
      console.log('頁面滾動了');
    }
  },
  mounted() {
    // 組件掛載后添加監(jiān)聽
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 組件銷毀前移除監(jiān)聽（關鍵）
    window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

2. 監(jiān)聽組件內 DOM 元素

<template>
  <div ref="content">內容區(qū)域</div>
</template>

<script>
export default {
  methods: {
    handleClick(e) {
      console.log('內容區(qū)域被點擊', e.target);
    }
  },
  mounted() {
    // 確保DOM已加載（this.$refs.content存在）
    this.$refs.content.addEventListener('click', this.handleClick);
  },
  beforeDestroy() {
    this.$refs.content.removeEventListener('click', this.handleClick);
  }
};
</script>

三、避坑指南：常見錯誤與解決方案

1. 回調函數引用不一致（常見問題）

• 錯誤示例：使用匿名函數或在生命周期內動態(tài)創(chuàng)建函數，導致removeEventListener無法匹配引用：
  javascript

  運行

  // Vue 3錯誤寫法
  onMounted(() => {
    // 匿名函數：每次調用引用不同
    window.addEventListener('scroll', () => { console.log('滾動'); });
  });
  onUnmounted(() => {
    // 無法移除匿名函數監(jiān)聽
    window.addEventListener('scroll', () => { console.log('滾動'); });
  });
  
• 解決方案：始終使用具名函數（如function handleXXX()）或通過useCallback（Vue 3）/methods（Vue 2）確保引用穩(wěn)定。

2. 遺漏監(jiān)聽的 “捕獲階段” 參數

• 錯誤示例：addEventListener的第三個參數（useCapture）為true時，移除時未傳入相同參數，導致移除失�。�
  javascript

  運行

  // 添加時使用捕獲階段
  window.addEventListener('click', handleClick, true);
  // 移除時未傳第三個參數（默認false），無法匹配
  window.removeEventListener('click', handleClick);
  
• 解決方案：移除時嚴格保持useCapture參數與添加時一致：
  javascript

  運行

  window.removeEventListener('click', handleClick, true); // 與添加時的第三個參數相同
  

3. 組件卸載時 DOM 已不存在導致報錯

• 問題：若組件內 DOM 通過v-if銷毀，可能導致removeEventListener時 DOM 已不存在（如myButton.value為null）。
• 解決方案：移除前先判斷 DOM 是否存在：
  javascript

  運行

  // Vue 3示例
  onUnmounted(() => {
    if (myButton.value) { // 先判斷DOM是否存在
      myButton.value.removeEventListener('click', handleClick);
    }
  });
  

4. 忘記移除第三方庫的事件監(jiān)聽

• 問題：使用第三方庫（如 ECharts、地圖庫）時，若庫內部綁定了事件，需按其文檔調用銷毀方法。
• 解決方案：在組件卸載時調用庫的銷毀函數，避免內部監(jiān)聽殘留：
  vue

  <script setup>
  import { onMounted, onUnmounted, ref } from 'vue';
  import * as echarts from 'echarts';
  
  const chartRef = ref(null);
  let chartInstance = null;
  
  onMounted(() => {
    chartInstance = echarts.init(chartRef.value);
    // 第三方庫可能內部綁定了事件
    chartInstance.on('click', (params) => { /* 處理點擊 */ });
  });
  
  onUnmounted(() => {
    // 調用庫的銷毀方法，內部會自動移除事件監(jiān)聽
    if (chartInstance) {
      chartInstance.dispose();
    }
  });
  </script>
  

總結：Vue 中移除事件監(jiān)聽的核心步驟

1. 定義穩(wěn)定回調：用具名函數、methods（Vue 2）或useCallback（Vue 3）確�；卣{函數引用唯一。
2. 匹配生命周期：在mounted（Vue 2）/onMounted（Vue 3）中添加監(jiān)聽，在beforeDestroy（Vue 2）/onUnmounted（Vue 3）中移除。
3. 檢查參數與 DOM：確保removeEventListener的參數（回調、useCapture）與添加時一致，且操作 DOM 前判斷其是否存在。