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，给网络请求和新节点渲染留出缓冲时间

不复杂但容易忽略。重点不在“用了没”，而在“算得准、换得稳、占得对”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！