SPA路由切换时未清理全局事件监听器会导致内存泄漏，重点排查窗口级、文档级委托及第三方库自动绑定的监听；应使用useEffect返回函数、onUnmounted或AbortSignal统一清理，并通过DevTools验证。
单页应用（SPA）中路由切换时，全局事件监听器（如 window、document 上的 resize、scroll、keydown）若未及时清理，极易引发内存泄漏——尤其当监听器闭包持有组件实例、大型数据或 DOM 引用时，会导致整个模块无法被垃圾回收。
重点排查：哪些全局监听容易残留？
以下三类是 SPA 路由切换中最常遗漏的监听源：
-
窗口级事件：比如在某个页面组件中监听
window.addEventListener('resize', handler)，但离开该页面时未解绑； -
文档级委托监听：使用
document.addEventListener('click', delegateHandler)实现菜单收起、弹窗关闭等，却未在组件卸载时移除； -
第三方库自动绑定：某些 UI 库（如日期选择器、拖拽插件）会在
document或window上注册监听，但未提供显式销毁方法，需手动追踪。
可靠清理方式：按框架场景落地
核心原则是：监听器绑定与解绑必须成对，且发生在同一生命周期阶段。推荐优先使用现代方案，避免手写 removeEventListener 配对失误。
-
React（useEffect 清理函数）：
在组件内定义具名函数或稳定引用的回调，并在useEffect返回函数中解绑：useEffect(() => {<br> const handleResize = () => updateLayout();<br> window.addEventListener('resize', handleResize);<br> return () => window.removeEventListener('resize', handleResize);<br>}, []); -
Vue 3（onUnmounted）：
onMounted(() => {<br> const handleScroll = () => throttleUpdate();<br> window.addEventListener('scroll', handleScroll);<br> onUnmounted(() => window.removeEventListener('scroll', handleScroll));<br>}); -
纯 JS 或无框架场景（AbortSignal 推荐）：
创建控制器，在路由离开或组件销毁时调用abort()即可批量清理：const controller = new AbortController();<br>window.addEventListener('keydown', handleKey, { signal: controller.signal });<br>// 切换路由前执行：<br>controller.abort(); // 所有带该 signal 的监听器自动移除
验证是否清理干净
仅靠代码逻辑不够，务必通过浏览器 DevTools 实时确认：
立即学习“Java免费学习笔记（深入）”；
- 打开 Elements 面板 → 选中
<html>或<body>→ 右侧切换到 Event Listeners 标签； - 展开
window或document，查看监听器列表，重点关注事件类型（如resize）和监听器所属脚本路径； - 执行一次路由跳转后刷新该面板，若仍看到上一个页面模块的监听器（例如文件名含
ProductPage.js），说明未清理成功。
不复杂但容易忽略：全局监听器没有“自动随组件消失”的机制，必须显式切断引用。用 AbortSignal 或框架卸载钩子统一管理，是最轻量也最可靠的实践。
