三次快照法是构建可控内存变化观察闭环的方法：第一步拍干净基线快照，第二步模拟操作后gc再拍快照，第三步等待异步沉淀后gc拍快照，通过对比识别vuecomponent、detached dom、closure等持续增长对象定位泄漏源。
对比三次快照法不是简单拍三张图，而是构建一个有控制、可验证的内存变化观察闭环。核心在于排除干扰、锁定增量、定位源头——尤其适合在路由切换、组件反复挂载/卸载等典型泄漏场景中使用。
第一步：建立干净基线（Snapshot #1）
确保应用处于最轻量稳定态：完成首屏渲染、无异步请求挂起、无定时器运行、无用户交互残留。此时强制触发一次垃圾回收（点击 Memory 面板左上角“Collect garbage”图标），再立即执行 Take snapshot。这张快照代表“健康起点”，所有后续增长都将以它为参照。
第二步：模拟真实操作并捕获压力态（Snapshot #2）
执行你怀疑存在泄漏的操作链，例如：
- Vue：连续 4 次进入/退出同一子路由
- React：反复挂载/卸载含图表或拖拽逻辑的组件 5 轮
- 全局事件：触发 resize 或 scroll 事件 10 次以上
操作结束后，**再次手动触发垃圾回收**，再拍第二张快照。这一步的关键是让 GC 尽可能清理掉本该释放的对象，把“残留”真正暴露出来。
第三步：验证泄漏是否持续（Snapshot #3）
不做任何新操作，等待 60–90 秒（给异步任务如 pending Promise、微任务队列充分沉淀），再手动 GC 一次，拍下第三张快照。如果内存未回落、甚至继续缓慢爬升，基本确认存在泄漏——因为此时已无主动行为，仅靠残留引用阻止 GC 回收。
已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。
对比分析时盯紧三类对象
在 Comparison 视图中，将 Snapshot #2 与 #1 对比，再将 #3 与 #2 对比，重点关注以下构造函数下的对象数量及 Retained Size 变化：
- VueComponent / ReactCompositeComponent：数量持续增加，说明组件实例未销毁；
- Detached HTMLDivElement / DocumentFragment：分离但被 JS 引用的 DOM 节点，常见于未清理的 ref 或第三方库绑定；
- Closure / System / Context：闭包持有大数组、API 响应数据、未清除的定时器回调，往往对应代码中忘记解绑的 setInterval、addEventListener 或未释放的 Chart 实例。
点击任一膨胀项，右侧 Containment 或 Retainer 树可逐层展开，找到是谁在“拽着”这个对象不让它被回收——通常会指向某个组件实例、全局变量或闭包作用域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
