事件监听器未解绑本质是资源清理缺失，需建立“谁添加谁清除”的契约；必须用具名函数或useCallback/ref固定引用，避免匿名函数；在框架卸载钩子（如onBeforeUnmount、useEffect返回函数）中集中清理；全局对象监听必须显式移除，DOM元素监听需视引用情况而定。

事件监听器在组件移除后未解绑，本质是资源清理缺失，不是“忘记写代码”，而是没建立统一的清理契约。核心在于：谁加的、在哪加的、必须由谁在何时删掉。

确保监听器与移除函数使用同一函数引用

匿名函数无法被精准移除，这是最常见失误。每次写 () => {} 都生成新函数，removeEventListener 找不到匹配项。

• ✅ 正确做法：把处理函数声明为具名方法或用 ref / useCallback 固定引用
• ✅ Vue 中可直接在 methods 定义，React 中用 useCallback 包裹并传入依赖数组
• ❌ 错误示例：el.addEventListener('click', () => {...}) → 卸载时调用 removeEventListener 无效

在框架生命周期钩子中集中清理

不要靠“记得手动清”，而是把清理逻辑绑定到组件销毁的确定时机上。

• Vue 2：在 beforeDestroy 或 destroyed 中执行移除
• Vue 3：优先用 onBeforeUnmount（unmounted 已晚，DOM 可能已销毁）
• React：在 useEffect 返回函数中清理，它会在组件卸载或依赖变化时自动触发
• 原生 JS 组件：若自行管理生命周期，需暴露 destroy() 方法并在父级调用

区分监听目标，按需选择解绑方式

不是所有监听器都要手动解绑，但必须清楚每类的生命周期归属。

• 绑定在 DOM 元素上的（如 button.addEventListener）：元素被 remove() 后通常自动释放，但若该元素被其他变量强引用（如存进全局数组），仍需手动解绑
• 绑定在 window、document 等全局对象上的：必须显式 removeEventListener，否则永久驻留
• 使用事件总线（mitt、EventEmitter）或自定义事件系统：保存 off 函数或监听 ID，在卸载时调用；避免直接 emitter.removeAllListeners()，可能误伤其他组件

配合定时器、异步请求一并管理

事件监听器常和这些副作用共存，漏清一个就可能引发连锁泄漏。

• 定时器：用 ref 存储 setTimeout/setInterval ID，卸载时调用 clearTimeout/clearInterval
• API 请求：用 AbortController 发起请求，卸载时调用 abort()；避免在 .then 中直接 setState，先判断是否仍挂载
• 第三方 SDK（地图、图表）：查阅文档，调用其提供的 destroy()、dispose() 或 remove() 方法