虚拟滚动核心是只渲染可视区及缓冲区列表项，用空白占位符维持总高度，将dom节点压至几十个；v-for渲染10万条会导致内存超30mb、帧率跌破10fps、移动端闪退。
Vue 虚拟滚动不是“删数据”，也不是“只加载一页”，而是保留完整滚动高度，只把用户当前看得见、以及紧邻上下几行的列表项真正渲染进 DOM，其余位置用空白占位符撑开空间——这样既维持自然滚动体验，又把真实 DOM 节点数压到几十个级别，哪怕百万条数据也几乎不卡。
为什么普通 v-for 渲染会崩？
一次性用 v-for 渲染 10 万条数据，浏览器要创建 10 万个 DOM 元素，每项附带样式计算、事件绑定、布局重排。结果就是：
- 首屏加载慢，内存飙升（轻松超 30MB）
- 滚动时频繁重绘，帧率跌破 10fps
- 移动端容易闪退，Chrome DevTools 明显报内存警告
vue-virtual-scroll-list 三个必填参数
它极简上手，核心只需配置三项，就能跑起来：
-
data-key：字符串，指定数据对象中唯一标识字段（如
'id'或'uid'） - data-sources：数组，传入完整大数据源（支持 10 万+ 条）
- data-component：Vue 单文件组件，定义单个列表项怎么长什么样
容器本身需设置明确高度（如 height: 500px）并开启滚动（overflow-y: auto），否则无法触发虚拟计算。
固定高度 vs 动态高度，怎么选？
多数业务场景推荐先用固定高度模式，性能最优、逻辑最稳：
- 加 item-height（数字或返回数字的函数），组件自动算出可视项数和起始索引
- 适合头像+标题+一行摘要这类结构统一的列表
内容高度差异大（比如评论含多图、长文本）时，启用动态高度：
- 去掉
item-height，组件会在首次可见时预渲染并缓存每项实际高度 - 内部通过
src/virtual.js的位置映射算法，保证滚动定位精准不跳变
关键细节别漏掉
几个小但影响大的点：
- keeps 控制缓存渲染项总数，默认 30；数据极密时可适当调高（如 50），防快速滑动白屏
- 列表项组件里必须接收
index和source两个 prop，这是框架传入的当前序号与数据对象 - 水平滚动只需加
direction="horizontal"，无需改结构，宽度逻辑自动切换 - 不要在列表项里写
mounted或watch做全局副作用——节点会被复用，行为不可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
