如何在组件卸载时正确移除事件监听？

一、核心前提：确保监听与移除的回调函数是同一引用

// 监听时用匿名函数
window.addEventListener('scroll', () => { console.log('滚动了'); });
// 移除时无法找到相同引用的函数，监听仍存在
window.removeEventListener('scroll', () => { console.log('滚动了'); });

// 定义具名函数（确保引用唯一）
function handleScroll() {
  console.log('滚动了');
}
// 监听
window.addEventListener('scroll', handleScroll);
// 移除（引用与监听时一致）
window.removeEventListener('scroll', handleScroll);

二、框架场景：Vue/React 组件中如何移除监听

1. Vue 3 组件（组合式 API）

<template>
  <div>监听滚动的组件</div>
</template>

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

// 定义具名回调函数（在setup中声明，确保整个组件生命周期内引用唯一）
function handleScroll() {
  console.log('页面滚动了');
}

// 组件挂载时添加监听
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

// 组件卸载时移除监听（关键步骤）
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

2. Vue 2 组件（选项式 API）

<template>
  <div>监听滚动的组件</div>
</template>

<script>
export default {
  methods: {
    // 回调函数定义在methods中，引用唯一
    handleScroll() {
      console.log('页面滚动了');
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 组件销毁前移除监听
    window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

3. React 组件（类组件）

class ScrollComponent extends React.Component {
  // 定义具名回调函数
  handleScroll = () => {
    console.log('页面滚动了');
  };

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    // 组件卸载前移除监听
    window.removeEventListener('scroll', this.handleScroll);
  }

  render() {
    return <div>监听滚动的组件</div>;
  }
}

4. React 组件（函数组件 + hooks）

import { useEffect, useCallback } from 'react';

const ScrollComponent = () => {
  // 用useCallback缓存回调函数，避免每次渲染重新创建（确保引用唯一）
  const handleScroll = useCallback(() => {
    console.log('页面滚动了');
  }, []); // 依赖为空数组，函数只创建一次

  useEffect(() => {
    // 添加监听
    window.addEventListener('scroll', handleScroll);
    
    // 返回清理函数，在组件卸载或依赖变化时执行
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll]); // 依赖handleScroll，确保函数变化时重新监听

  return <div>监听滚动的组件</div>;
};

三、原生 JS 场景：非框架环境下的组件 / 模块卸载

// 定义一个弹窗模块
const Popup = {
  // 初始化：创建DOM并添加监听
  init() {
    this.dom = document.createElement('div');
    this.dom.textContent = '弹窗内容';
    document.body.appendChild(this.dom);
    // 绑定点击关闭事件
    this.dom.addEventListener('click', this.handleClose);
  },
  // 回调函数（用箭头函数绑定this，或在构造时绑定）
  handleClose: function() {
    Popup.destroy();
  },
  // 销毁：移除DOM和监听
  destroy() {
    // 先移除事件监听（关键）
    this.dom.removeEventListener('click', this.handleClose);
    // 再移除DOM
    document.body.removeChild(this.dom);
    // 清空引用
    this.dom = null;
  }
};

// 使用弹窗
Popup.init();
// 关闭弹窗时执行销毁（会自动移除监听）
// Popup.destroy();

四、常见问题与避坑指南

1. 回调函数引用变化导致移除失败
   • 问题：若回调函数在每次渲染时重新创建（如 React 中未用useCallback的函数、Vue 中在onMounted内定义的函数），会导致removeEventListener找不到相同引用。
   • 解决：用框架提供的缓存方法（如useCallback、methods）确保函数引用稳定。
2. 遗漏 “非 window/document” 的事件监听
   • 问题：除了window、document，对自定义 DOM 元素（如div、button）的监听也需移除，尤其动态创建的元素。
   • 解决：在元素被移除前，先移除其上的所有监听（如 Vue 的v-if销毁元素前，在onUnmounted中处理）。
3. 事件监听的 “捕获 / 冒泡” 阶段不匹配
   • 问题：addEventListener的第三个参数（useCapture）若为true（捕获阶段），移除时也需传入true，否则无法匹配。
   • 解决：移除时严格保持useCapture参数与监听时一致：
     javascript

     运行

     // 监听时使用捕获阶段
     window.addEventListener('click', handleClick, true);
     // 移除时也必须传入true
     window.removeEventListener('click', handleClick, true);
     

总结：正确移除事件监听的 3 个关键步骤

1. 定义稳定引用的回调函数：用具名函数、框架缓存方法（useCallback、methods）确保监听与移除时引用一致。
2. 在组件卸载生命周期中移除：Vue 的onUnmounted、React 的componentWillUnmount/useEffect清理函数、原生 JS 的destroy方法，是佳时机。
3. 覆盖所有监听对象：包括window、document、自定义 DOM 元素，避免遗漏任何一处监听。