大型列表的虚拟滚动
vue-virtual-scroller、RecycleScroller，以及固定项目高度与可变高度渲染的处理
大型列表的虚拟滚动 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
大型列表问题
渲染数千个 DOM 节点会很慢，而且非常占用内存。虚拟滚动只渲染当前在视口中可见的项目，并在滚动时回收 DOM 节点。
安装 vue-virtual-scroller
一个常用的库是 vue-virtual-scroller。请安装它并导入其样式。
npm install vue-virtual-scroller注册组件
导入 RecycleScroller 及其 CSS，然后在组件中使用它。
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";项目属性
RecycleScroller 通过 items 属性接收完整的数据数组。它不会一次性渲染所有项目，而只渲染可见窗口中的项目。
<RecycleScroller :items="rows" />项目大小属性
item-size 会告诉滚动器每一行的像素高度。使用固定大小时，它可以立即计算可见范围和总滚动高度。
<RecycleScroller
:items="rows"
:item-size="48"
/>键字段属性
使用 key-field 为每个项目提供稳定的身份标识，确保回收的节点能够正确映射到数据。
<RecycleScroller
:items="rows"
:item-size="48"
key-field="id"
/>v-slot 项目模板
使用默认的作用域插槽来渲染每个可见项目。该插槽会提供当前的 item。
<RecycleScroller :items="rows" :item-size="48" key-field="id">
<template v-slot="{ item }">
<div class="row">{{ item.name }}</div>
</template>
</RecycleScroller>只渲染可见项目
滚动时，滚动器会挂载进入视口的项目，并卸载离开视口的项目。无论列表多长，DOM 节点数量都会保持较少。
固定项目高度与可变项目高度
固定高度最快，因为位置可以通过纯算术计算得出。当各行高度不同时，就需要采用不同的方法。
处理可变高度
对于可变高度，请使用 DynamicScroller 和 DynamicScrollerItem，它们会测量已渲染的项目并调整其位置。
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
<DynamicScroller :items="rows" :min-item-size="40" key-field="id">
<template v-slot="{ item, active }">
<DynamicScrollerItem :item="item" :active="active">
<div>{{ item.text }}</div>
</DynamicScrollerItem>
</template>
</DynamicScroller>权衡
虚拟滚动会使页面内查找（Ctrl+F）、指向屏幕外项目的锚点链接以及无障碍功能变得更加复杂。只有在列表确实很大时才使用它。
快速检查
RecycleScroller 实际上会将什么渲染到 DOM 中？
回顾
使用 vue-virtual-scroller 的 RecycleScroller 进行虚拟滚动时，只会渲染可见项目。通过 items 传入数据，设置 item-size 和 key-field，并在 v-slot 模板中渲染每一行。为了提高速度，请使用固定高度；对于可变高度，请使用 DynamicScroller，并且只在列表确实很大时采用这种技术。
常见问题解答
「大型列表的虚拟滚动」课时是免费的吗？
是的 — 「大型列表的虚拟滚动」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「大型列表的虚拟滚动」这节课中我会学到什么？
vue-virtual-scroller、RecycleScroller，以及固定项目高度与可变高度渲染的处理 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「大型列表的虚拟滚动」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。