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

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

2. 移除全局鼠標(biāo)事件（如window上的click）

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

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

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

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

三、避坑指南：鼠標(biāo)事件移除的常見問題

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

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

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

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

  運(yùn)行

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

3. DOM 元素不存在時(shí)移除事件

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

  運(yùn)行

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

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

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