虚拟滚动核心是只渲染可视区及缓冲区列表项，用空白占位符维持总高度，将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），否则无法触发虚拟计算。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

固定高度 vs 动态高度，怎么选？

多数业务场景推荐先用固定高度模式，性能最优、逻辑最稳：

• 加 item-height（数字或返回数字的函数），组件自动算出可视项数和起始索引
• 适合头像+标题+一行摘要这类结构统一的列表

内容高度差异大（比如评论含多图、长文本）时，启用动态高度：

• 去掉 item-height，组件会在首次可见时预渲染并缓存每项实际高度
• 内部通过 src/virtual.js 的位置映射算法，保证滚动定位精准不跳变

关键细节别漏掉

几个小但影响大的点：

• keeps 控制缓存渲染项总数，默认 30；数据极密时可适当调高（如 50），防快速滑动白屏
• 列表项组件里必须接收 index 和 source 两个 prop，这是框架传入的当前序号与数据对象
• 水平滚动只需加 direction="horizontal"，无需改结构，宽度逻辑自动切换
• 不要在列表项里写 mounted 或 watch 做全局副作用——节点会被复用，行为不可控