Vue 3列表虚拟化通过仅渲染可视区域及缓冲区节点（20–50个）、用占位元素撑高并translateY定位，将万级DOM从10000个降至几十个，内存从300MB降至几MB；同时减少Proxy代理数量，提升响应式性能。
Vue 3 中列表虚拟化直接从根源上砍掉 DOM 节点数量，从而大幅降低内存占用。它不渲染全部数据，只保留当前可视区域加少量缓冲区的节点（通常 20–50 个），其余用纯高度占位元素撑开滚动空间。10000 条数据下，DOM 节点从 10000 个锐减到几十个，内存占用从约 300MB 降到几 MB 级别。
只渲染“看得见”的那部分
浏览器窗口高度固定、每项高度已知时，就能精准算出哪些数据该出现在屏幕上：
- 用 scrollTop ÷ itemHeight 得到可视起始索引
startIndex - 用 (scrollTop + containerHeight) ÷ itemHeight 得到结束索引
endIndex - 仅对
data.slice(startIndex, endIndex)进行 v-for 渲染 - 离开视口的 DOM 节点被彻底卸载，不保留在内存中
用占位元素维持滚动体验
整个列表视觉高度不能塌，否则滚动条会消失或比例失真：
- 插入一个不可见的 phantom 元素，设置
height: itemHeight × totalItems - 渲染出的真实内容通过
transform: translateY精准定位到对应位置 - 滚动时只更新 translateY 值和渲染子集，不新增/删除大量 DOM
- 占位高度必须精确，否则用户拖动滚动条会“跳”或“卡”
避开响应式和渲染的双重放大效应
传统长列表不仅 DOM 多，Vue 3 的响应式系统也会为每条数据建立 Proxy 依赖追踪：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 虚拟列表让实际参与响应式的对象数量同步减少——只对当前渲染的几十项做响应式代理
- 未渲染的数据保持原始 JS 对象状态，不触发 Proxy 初始化开销
- 修改某条数据时，仅影响当前在 DOM 中的组件实例，不会引发全量依赖通知
- 配合
shallowRef管理大数据源，进一步降低代理成本
关键参数要设得准
参数不合理会让优化失效，甚至更卡：
- keeps（缓冲区大小）：设 20–50。太小（如 5）快速滚动易露白；太大（如 100）等于多建无用 DOM
- itemHeight：优先用固定值。动态高度需预存真实高度缓存，否则 translateY 定位偏移，内容错位
- loadmoreoffset：触底加载预留距离建议 ≥200px，给网络请求和新节点渲染留出缓冲时间
不复杂但容易忽略。重点不在“用了没”，而在“算得准、换得稳、占得对”。
