推荐直接使用 vue-virtual-scroll-list（Vue 3）或 vue-virtual-scroller（Vue 2），核心是只渲染可视区内容；需规范数据（数组+唯一 key）、独立列表项组件、必填属性（:data-key/:data-sources/:data-component）、容器固定高度，并建议配置 :keeps 和 :estimate-size 优化性能。
直接用 vue-virtual-scroll-list 或 vue-virtual-scroller 这类成熟组件，不建议手写虚拟滚动逻辑。核心是只渲染可视区域内容，避免一次性挂载上万 DOM 节点。
选对组件并正确安装
Vue 2 项目推荐 vue-virtual-scroller，Vue 3 推荐 vue-virtual-scroll-list（兼容 Composition API）：
- 安装命令统一为：
npm install vue-virtual-scroll-list --save - 全局注册（main.js 或入口文件）：
import VirtualList from 'vue-virtual-scroll-list'; app.component('virtual-list', VirtualList); - 若用 vue-virtual-scroller，需额外引入样式：
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
数据源和列表项组件必须规范
数据必须是数组，每项带唯一 key 字段（如 id 或 uid），不可重复、不可缺失：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- ✅ 正确示例：
[{ uid: 'u1', name: '张三' }, { uid: 'u2', name: '李四' }] - ❌ 错误示例：
[{ name: '张三' }, { name: '李四' }]（缺 key）或[{ id: 1 }, { id: 1 }]（key 不唯一） - 列表项必须是独立 .vue 单文件组件，接收
source（当前数据）和index（序号）两个 props
模板中关键属性不能少
在 SFC 的 <template></template> 中，<virtual-list></virtual-list> 至少要配齐三个必填属性：
立即学习“前端免费学习笔记（深入）”；
-
:data-key—— 指定唯一标识字段名，如'uid' -
:data-sources—— 绑定数据数组，如userList -
:data-component—— 绑定列表项组件，如UserItem - 容器必须有固定高度 +
overflow-y: auto，例如：style="height: 500px; overflow-y: auto;"
按需调优提升体验
大数据量下，加两个参数能明显改善滚动顺滑度和首屏响应：
-
:keeps="30"—— 控制 DOM 中常驻节点数，建议设为可视区域行数的 2–3 倍（如视口显示 12 行，设 25–36） -
:estimate-size="64"—— 预估每项高度（单位 px），用于初始滚动位置计算；若项高差异大，可用vue-virtual-scroller的DynamicScroller替代 - 避免在列表项内做复杂计算或 watch 深监听，保持
source是浅层对象更稳妥
