核心是确认组件卸载后外部资源是否被释放；需在onUnmounted中手动清理定时器、事件监听、第三方实例等，避免闭包持有组件作用域，并用内存快照比对验证泄漏。
评估 Vue 3 组件渲染过程中的内存占用与垃圾回收，核心不是看“Vue 多占了多少内存”，而是确认“组件卸载后，不该留下的资源是否真正被释放”。浏览器不会自动回收你手动创建的定时器、事件监听、第三方实例（如 ECharts、地图 SDK）或闭包引用。Vue 只负责清理它自己创建的响应式 effect 和组件实例作用域内的依赖，其余全靠开发者主动管理。
用 performance.memory 实时监控内存趋势
在开发或测试阶段，可周期性采集 JS 堆内存数据，观察组件反复挂载/卸载后的变化：
- 启用定时采样：
setInterval(() => console.log(`使用量: ${performance.memory.usedJSHeapSize / 1024 / 1024 | 0}MB`), 3000) - 关键对比点：首次加载后内存基线 → 打开某页 → 关闭该页 → 等待 5 秒 → 再次查看内存。若未回落到接近基线，大概率存在泄漏
- 注意：Chrome 的 Memory 面板中选中“Allocation instrumentation on timeline”可录制对象分配图，定位持续增长的构造函数（如 VueComponent、Timer、EventListener）
检查组件卸载时是否清理了外部资源
这是内存泄漏最常见源头。Vue 不会替你关掉 setInterval、解绑 window.addEventListener、断开 WebSocket 或销毁图表实例：
- 在
onUnmounted（或beforeUnmount）中统一清理：let timer; const chart = echarts.init(el);<br>onUnmounted(() => { clearInterval(timer); chart.dispose(); window.removeEventListener('resize', handler); }) - 使用
keep-alive时，不能只依赖onUnmounted，要配合deactivated钩子做资源释放，activated中恢复（如重连 WebSocket、重启轮询） - 动态组件（
:is）切换时，被替换组件的beforeUnmount是最后的清理时机，务必处理重资源对象
识别响应式系统带来的隐性引用
ref/reactive 对象本身不泄漏，但不当使用会延长组件实例生命周期：
立即学习“前端免费学习笔记（深入）”；
- 避免在
setInterval回调中直接访问组件内ref—— 闭包会持住整个组件作用域；应改用onBeforeUnmount清理 + 局部变量暂存 - 大型只读数据（如字典项、配置表）用
Object.freeze()或markRaw()，防止 Vue 尝试转为响应式而产生 Proxy 对象和依赖追踪开销 - 1000+ 条列表数据别用
reactive包裹，改用shallowRef，否则每个元素都会生成独立的 Proxy，显著增加内存驻留对象数
借助 Chrome DevTools 定位泄漏对象
内存快照比对是验证泄漏的金标准：
- 打开 DevTools → Memory 面板 → 选中 “Heap snapshot” → 点击 “Capture heap snapshot”
- 操作步骤：拍快照 A（空闲态）→ 进入目标页面 → 拍快照 B → 返回上一页并等待 5 秒 → 拍快照 C
- 对比 B 与 C：筛选 Constructor 名为
VueComponent、HTMLDivElement、EventListener的对象，查看 Retained Size 是否下降。若数量未减少，说明实例未被 GC - 点击泄漏对象 → 查看 “Retainers” 列表，找到持有它的闭包或全局变量（如 window.xxx、timerId 引用），即可定位泄漏源头
