IntersectionObserver和ResizeObserver不会自动解除引用，必须显式调用disconnect()；仅unobserve()不够，observer实例持续持有DOM元素及闭包，导致Detached节点无法GC。
不会自动解除引用。IntersectionObserver 和 ResizeObserver 实例一旦创建，就会强持有被观察的 DOM 元素及其回调上下文；即使目标元素已被 remove() 或 v-if 移除，只要 observer 实例本身还存活，它就持续阻止该元素及其子树被垃圾回收。
Observer 必须显式断开连接
浏览器不会在 DOM 元素移除时自动调用 .disconnect()。这是设计使然——Observer 的生命周期由开发者控制，而非绑定于 DOM 节点存续状态。
-
不调用
disconnect()：observer 仍保留在内存中，持续监听（尽管目标已不存在），其内部引用链（如target → observer → callback → closure）将整个节点树钉住 -
仅调用
unobserve(el)不够：这只从观察队列中移除该元素，observer 实例本身仍在运行，仍可能持有其他目标或闭包变量 -
必须配对使用
observe()和disconnect()：尤其在组件卸载、弹窗关闭、tab 切换等节点销毁场景下，清理应作为生命周期终结的必做动作
常见泄漏场景与写法对比
以下写法极易导致 detached node 堆积，Chrome DevTools Memory 面板可直观看到“Detached HTMLDivElement”数量持续上升：
-
❌ 错误：未清理
const io = new IntersectionObserver(cb); io.observe(el); // 组件销毁后无任何清理 -
❌ 错误：只 unobserve
io.unobserve(el); // el 已移除，但 io 实例仍在，且可能还在监听其他元素 -
✅ 正确：组件级统一 disconnect
onBeforeUnmount(() => io.disconnect()); // VueuseEffect(() => () => io.disconnect(), []); // React
如何验证是否泄漏
打开 Chrome DevTools → Memory 标签 → 拍摄堆快照（Heap Snapshot）→ 筛选 Detached → 查看是否有大量 HTMLDivElement、IntersectionObserver 或 ResizeObserver 实例残留。若存在，说明 observer 未及时释放，或其回调闭包意外捕获了长生命周期对象（如全局 store、大型数组）。
安全替代方案与加固建议
- 优先使用框架生命周期钩子（
onBeforeUnmount/useEffect cleanup）包裹disconnect() - 避免在 observer 回调中直接引用外部大对象；必要时用局部变量或 WeakMap 缓存关联数据
- 对动态列表中的每个 item 单独创建 observer？慎用——考虑改用事件委托 +
isIntersecting判断，或批量 observe 后按需过滤 entries - 服务端渲染（SSR）hydrate 阶段易触发重复 observe，建议在 hydrate 完成后再初始化 observer，或用标记位防重入
