循环列表中 intersectionobserver 资源解绑难点在于节点复用与观察器生命周期错配，需在复用前主动 unobserve、清理挂载引用、分层释放子资源，并全局复用单个 observer 实例，组件卸载时调用 disconnect 彻底终止。
循环列表中 IntersectionObserver 的资源解绑难点，本质是“节点复用”与“观察器生命周期”错配：DOM 节点被回收再利用时，旧的 observer 实例、事件监听、定时器等残留未清理，导致内存泄漏或重复触发。关键不在“是否解绑”，而在“何时解绑、对谁解绑、解什么绑”。
复用节点前必须主动 unobserve 并清理绑定关系
虚拟滚动或 RecycleList 中，一个 DOM 节点可能多次被 assign 给不同数据项。若仅靠 observer.unobserve(el) 却不清理 el 上挂载的 observer 引用，下次复用该节点时会误认为它仍被观察，甚至重复 observe。
- 每次节点准备复用（如
itemEl.replaceChildren()前），先检查并断开其关联的 observer：el.__io && el.__io.unobserve(el) - 统一将 observer 实例挂载到元素自身：
el.__io = observer，避免散落在闭包或组件 state 中难以追溯 - 在数据重绑定前，调用
observer.unobserve(el)是必须动作，不能依赖组件卸载钩子——因为节点没销毁，钩子根本不会触发
销毁高负载子资源需分层执行，不能只删 DOM
节点虽复用，但其内部可能承载 canvas、video、chart、第三方 SDK 等重型实例。直接 replaceChildren() 或 innerHTML = '' 不会自动释放这些资源。
- 为每个可复用项封装明确的
dispose()方法，集中处理：
– 移除所有addEventListener（尤其 document 级）
– 清空setTimeout/setIntervalID 并置 null
– 调用chart.dispose()、video.pause()、canvas.getContext('2d').clearRect()
– 断开MutationObserver、ResizeObserver等其他观察者 - 用
data-loaded="false"标记状态，复用时按需初始化，避免每次都重建
避免 observer 实例泛滥：复用单个观察器，而非每项一个
常见误区是为每个列表项 new 一个 IntersectionObserver。这不仅开销大，更导致解绑逻辑分散、难以追踪。
- 全局只创建 1 个 observer 实例，用它 observe 所有可复用项：
observer.observe(itemEl) - 回调中通过
entry.target区分具体项，结合itemEl.dataset.id或itemEl.__dataIndex关联业务数据 - 当某项永久退出（如列表重置、路由跳转），再调用
observer.unobserve(itemEl)；临时移出视口不需 unobserve，仅触发 dispose
组件级卸载时必须 disconnect，且不可延迟
如果列表嵌套在 Vue/React 组件中，组件销毁时 DOM 节点可能还在文档中（如使用 keep-alive 或缓存容器），此时仅靠 unobserve 不够。
- 在组件
unmounted（Vue）或useEffect cleanup（React）中，调用observer.disconnect()，彻底终止观察器线程 - 确保 observer 实例被闭包或 ref 正确持有，避免因变量释放导致无法访问
- 不要在
beforeUnmount或componentWillUnmount中操作——它们可能在 DOM 移除前就执行，observer 仍持有已移除节点引用，引发报错
