Vue 3 虚拟列表内存释放核心是框架自动卸载+资源清理：仅保留可视区及缓冲区（如上下各5行）DOM节点，滚动时通过唯一key触发patch移除离屏节点，并在onBeforeUnmount中清除事件、定时器等强引用，避免内存泄漏。
Vue 3 中列表虚拟化释放不可见区域节点内存，核心不是“手动释放”，而是靠框架自动卸载 + 合理设计保障 DOM 和关联资源及时回收。关键在于让离开可视区的节点真正被 remove()，同时清除其绑定的事件、定时器、闭包引用等强持有关系。
确保节点被真实移除
虚拟列表必须只保留可视区域 + 缓冲区（如上下各 5 行）的 DOM 节点。滚动时，离开视口的节点需被 Vue 主动卸载：
- 使用
v-for渲染时，配合唯一、稳定的:key（如item.id），避免用index导致误销毁/重建 - 在计算
visibleItems时，严格截取范围（如items.slice(start, end)），不包含不可见项 —— Vue 会自动 patch 掉旧节点 - 若用
transform: translateY定位，父容器内只挂载当前可见项，其余不参与渲染，自然无 DOM 节点生成
清理节点附带的副作用资源
DOM 节点被移除只是第一步；若它绑定了事件、定时器或闭包引用，JS 引擎仍无法回收内存：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 在子组件中（如每个列表项是独立组件），利用
onBeforeUnmount清理：
清除window.addEventListener、setTimeout、setInterval
取消未完成的请求（如abortController.abort()） - 避免在
setup或computed中创建闭包，意外捕获整个 item 或组件实例 - 不用
innerHTML = ''替代节点卸载 —— 它不清除事件监听器，残留引用会阻止回收
控制缓冲区大小，避免过度驻留
缓冲区（preload zone）用于防白屏，但过大反而增加内存压力：
立即学习“前端免费学习笔记（深入）”；
- 典型配置：可视项数 + 上下各 3–5 个预加载项，总数控制在 20–50 个 DOM 节点内
- 动态高度场景下，慎用过大的
reserve区；可结合getBoundingClientRect()或高度缓存做精准计算，减少冗余占位 - 滚动停止后，可考虑用
requestIdleCallback延迟清理边缘缓冲项（非必需，但适合极端场景）
验证是否真正释放
可通过浏览器开发者工具确认内存是否回落：
- 打开 Memory 面板 → 拍摄堆快照（Heap Snapshot）→ 滚动长列表 → 再拍一张 → 对比
Detached DOM tree是否清零 - 检查 Elements 面板中，滚动后容器内 DOM 节点数量是否稳定在预期范围内（如始终 ≤ 40 个）
- 监听
DOMNodeRemoved（非标准但可临时调试）或在子组件onBeforeUnmount打日志，确认卸载触发
