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

1. 移除組件內(nèi) DOM 元素的鼠標事件

2. 移除全局鼠標事件（如window上的click）

3. 處理動態(tài)綁定 / 移除（如按鈕控制）

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

1. 移除組件內(nèi)元素的鼠標事件

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

三、避坑指南：鼠標事件移除的常見問題

1. 混淆 Vue 指令與原生事件綁定

• 問題：若通過 Vue 的@click（v-on:click）指令綁定事件，無需手動移除（Vue 會在組件卸載時自動清理），但如果同時用addEventListener綁定了相同事件，需手動移除。
  vue

2. 回調(diào)函數(shù)引用變化導致移除失敗

• 問題：若回調(diào)函數(shù)是動態(tài)創(chuàng)建的（如箭頭函數(shù)直接寫在addEventListener中），會導致removeEventListener找不到相同引用。
  javascript

  運行

  // 錯誤示例：匿名箭頭函數(shù)引用不唯一
  box.value.addEventListener('click', () => { console.log('點擊'); });
  // 無法移除，因為每次創(chuàng)建的箭頭函數(shù)引用不同
  box.value.removeEventListener('click', () => { console.log('點擊'); });
  
• 解決方案：始終使用具名函數(shù)（如function handleClick() {}），確保綁定與移除時引用一致。

3. DOM 元素不存在時移除事件

• 問題：若組件內(nèi) DOM 通過v-if控制顯示 / 隱藏，可能在移除事件時 DOM 已被銷毀（如box.value為null），導致報錯。
• 解決方案：移除前先判斷 DOM 是否存在：
  javascript

  運行

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

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

1. 綁定與移除的參數(shù)完全一致：事件類型（如click）、回調(diào)函數(shù)引用、捕獲階段參數(shù)（useCapture）必須相同。
2. 在合適時機移除：組件內(nèi) DOM 事件在onUnmounted（Vue 3）/beforeDestroy（Vue 2）中移除；動態(tài)控制的事件在不需要時主動移除。
3. 區(qū)分 Vue 指令與原生綁定：@click等 Vue 指令無需手動移除，addEventListener綁定的事件必須手動移除。