虚拟列表原理与实现，并在 Vue 项目场景中怎么实现

这是前端面试里的中高频题，尤其是你简历里如果写了：

• 长列表优化
• 大数据量渲染
• 性能优化
• 表格优化
• Vue 项目优化

那几乎很容易被问到。

这道题如果只回答：

“虚拟列表就是只渲染可视区域的数据。”

这个回答方向没错，但太浅。
如果你能讲到：

• 为什么需要虚拟列表
• 它的核心原理
• 定高和不定高实现区别
• 如何处理滚动、定位、缓冲区
• Vue 中怎么落地
• 和分页、懒加载的区别

那面试官会觉得你是真做过，而不是背八股。

一、什么是虚拟列表？

先给一个标准定义：

虚拟列表是一种长列表性能优化方案，它的核心思想是：列表数据可能有几千条、几万条，但页面中只渲染当前可视区域附近的少量 DOM 节点，其余数据通过占位空间模拟完整列表高度，从而降低 DOM 数量和渲染开销。

你可以把它理解成：

• 数据有 10000 条
• 但页面里可能只渲染 20~40 条
• 用户滚动时，动态替换这 20~40 条的数据内容和位置
• 看起来像渲染了全部，实际上只渲染了很少一部分

二、为什么需要虚拟列表？

这个问题一定要答，因为它体现你理解的是“为什么”，不是只会“怎么写”。

1. 大量 DOM 会导致性能问题

如果一次性渲染几千条、几万条列表项，会带来：

• 首次渲染慢
• 滚动卡顿
• 内存占用高
• diff 成本高
• 重排重绘开销大

特别是在这些场景里更明显：

• 聊天记录
• 商品列表
• 日志列表
• 表格数据
• 后台管理系统的大数据表格

2. 用户实际只看得到一小部分

无论数据有多少，用户同一时刻能看到的，其实只是屏幕里那十几条或几十条。

所以优化思路很自然：

既然用户只看得到一部分，那就只渲染这一部分。

这就是虚拟列表的本质。

三、虚拟列表的核心原理

这部分是面试重点。

虚拟列表的核心可以概括成 3 件事：

1. 只渲染可视区域附近的数据
2. 用一个占位容器撑起完整滚动高度
3. 通过滚动动态计算当前应该显示哪些项，并把它们定位到正确位置

直观理解

比如：

• 总数据：10000 条
• 每项高度：50px
• 总高度：10000 * 50 = 500000px

页面不可能真的渲染 10000 个节点。
所以通常这样做：

• 外层容器：固定高度，可滚动
• 内层占位容器：高度设置为500000px
• 实际渲染层：只渲染当前可见的 20~30 条
• 通过transform: translateY(...)或padding-top把这部分元素移动到正确位置

用户滚动时：

• 根据scrollTop计算开始索引和结束索引
• 截取这段数据渲染
• 更新偏移位置

四、虚拟列表的关键计算

这里最好讲清楚几个参数，特别加分。

假设是定高列表，每项高度固定为itemHeight = 50。

1. 可视区域能显示多少条

visibleCount = Math.ceil(containerHeight / itemHeight)

比如：

• 容器高度500px
• 每项高度50px

那么可视区域大约显示：

500 / 50 = 10

即 10 条。

2. 当前开始索引

startIndex = Math.floor(scrollTop / itemHeight)

比如：

• scrollTop = 260
• itemHeight = 50

则：

Math.floor(260 / 50) = 5

说明第 5 项是当前顶部开始显示的元素。

3. 当前结束索引

endIndex = startIndex + visibleCount

为了避免滚动太快出现白屏，通常还会加一个缓冲区buffer：

startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - buffer) endIndex = Math.min(list.length, startIndex + visibleCount + buffer * 2)

4. 偏移量

因为不是从第 0 条开始渲染，而是从startIndex开始渲染，所以需要把渲染区域往下移动：

offsetY = startIndex * itemHeight

一般用：

transform: translateY(offsetY)

来定位。

五、定高虚拟列表实现思路

面试里建议先讲定高版，因为这是最标准也最容易落地的版本。

DOM 结构思路

<div class="list-container"> <div class="list-phantom"></div> <div class="list-content"></div> </div>

含义：

• list-container：滚动容器
• list-phantom：撑开总高度的占位元素
• list-content：真正渲染可见项的内容区域

基础示意代码

const itemHeight = 50; const containerHeight = 500; const visibleCount = Math.ceil(containerHeight / itemHeight); const totalHeight = list.length * itemHeight; function onScroll(scrollTop) { const start = Math.floor(scrollTop / itemHeight); const end = start + visibleCount; const visibleData = list.slice(start, end); const offsetY = start * itemHeight; render(visibleData, offsetY); }

核心点总结

定高虚拟列表依赖 3 个公式：

• start = scrollTop / itemHeight
• end = start + visibleCount
• offset = start * itemHeight

面试时把这三个说清楚，已经很不错了。

六、不定高虚拟列表实现更难，难在哪里？

这部分是拉开差距的重点。

如果每一项高度都不同，就不能再通过：

startIndex = scrollTop / itemHeight

来计算，因为itemHeight不固定。

不定高的难点

1. 无法直接通过公式算索引

必须知道每一项的真实高度。

2. 滚动位置和索引关系不再是线性的

需要维护每个元素的高度信息和累计位置信息。

3. 渲染后还要动态测量

因为很多项的高度只有渲染后才能拿到。

常见解决思路

1. 先预估高度

先给每项一个estimatedHeight

2. 渲染后测量真实高度

通过ResizeObserver/getBoundingClientRect()获取真实高度

3. 更新位置缓存

维护每一项的：

• height
• top
• bottom

4. 通过二分查找定位 startIndex

根据scrollTop在累计高度数组中找到起始索引

你在面试里可以这样说

定高虚拟列表实现相对简单，因为可以直接通过scrollTop / itemHeight计算索引；不定高场景更复杂，需要维护每一项的高度缓存和累计偏移，一般会配合预估高度、渲染后测量和二分查找来优化滚动定位。

这句话很加分。

七、虚拟列表和分页、懒加载有什么区别？

这个问题很容易被追问。

1. 和分页的区别

分页

• 一次只请求或展示一页数据
• 用户翻页切换数据
• 适合管理系统表格、列表页

虚拟列表

• 数据可以一次拿很多
• 但只渲染可视区域
• 用户滚动时连续浏览，体验更流畅

一句话：

分页解决的是“展示多少数据”，虚拟列表解决的是“渲染多少 DOM”。

2. 和懒加载的区别

懒加载

• 关注资源何时加载
• 比如图片进入视口才加载

虚拟列表

• 关注节点何时渲染
• 减少 DOM 数量

一句话：

懒加载优化的是资源请求时机，虚拟列表优化的是长列表渲染性能。

八、Vue 项目场景中怎么实现？

这个是你问题里的重点。

Vue 项目里虚拟列表一般有两种方式：

1. 自己封装虚拟列表组件
2. 使用成熟库

建议面试回答时说：

如果业务场景明确、功能不复杂，我可以自己封装一个定高虚拟列表组件；如果是复杂表格、不定高、横向纵向联动等场景，我更倾向于使用成熟方案，比如vue-virtual-scroller、VVirtualList等。

这样更像工程实践。

九、Vue 中手写一个定高虚拟列表的核心实现

下面给你一个Vue 3 Composition API的简化思路，面试时非常够用了。

1. 基本思路

需要几个核心状态：

• 总数据list
• 每项高度itemHeight
• 容器高度containerHeight
• 当前滚动位置scrollTop
• 可视数量visibleCount
• 开始索引start
• 结束索引end
• 偏移量offsetY

2. 示例代码

<template> <div class="virtual-list" ref="containerRef" @scroll="handleScroll" > <div class="phantom" :style="{ height: totalHeight + 'px' }"></div> <div class="content" :style="{ transform: `translateY(${offsetY}px)` }" > <div v-for="item in visibleData" :key="item.id" class="item" :style="{ height: itemHeight + 'px' }" > {{ item.text }} </div> </div> </div> </template> <script setup> import { ref, computed } from 'vue' const props = defineProps({ list: { type: Array, default: () => [] }, itemHeight: { type: Number, default: 50 }, containerHeight: { type: Number, default: 500 }, buffer: { type: Number, default: 5 } }) const containerRef = ref(null) const scrollTop = ref(0) const totalHeight = computed(() => props.list.length * props.itemHeight) const visibleCount = computed(() => Math.ceil(props.containerHeight / props.itemHeight) ) const startIndex = computed(() => Math.max(0, Math.floor(scrollTop.value / props.itemHeight) - props.buffer) ) const endIndex = computed(() => Math.min( props.list.length, startIndex.value + visibleCount.value + props.buffer * 2 ) ) const visibleData = computed(() => props.list.slice(startIndex.value, endIndex.value) ) const offsetY = computed(() => startIndex.value * props.itemHeight) const handleScroll = (e) => { scrollTop.value = e.target.scrollTop } </script> <style scoped> .virtual-list { height: 500px; overflow-y: auto; position: relative; } .phantom { width: 100%; } .content { position: absolute; top: 0; left: 0; width: 100%; } .item { box-sizing: border-box; border-bottom: 1px solid #eee; line-height: 50px; padding: 0 12px; } </style>

3. 这段代码的核心逻辑

占位高度

totalHeight = list.length * itemHeight

可视条数

visibleCount = containerHeight / itemHeight

起始索引

startIndex = scrollTop / itemHeight

渲染数据

visibleData = list.slice(startIndex, endIndex)

偏移

offsetY = startIndex * itemHeight

这就是 Vue 版虚拟列表最核心的东西。

十、Vue 项目中常见优化点

如果你能讲这部分，面试会更精彩。

1. 加缓冲区，避免白屏

如果只渲染刚好可视区域的项，快速滚动时容易出现短暂白屏。
所以通常会多渲染上下几条：

buffer = 5

比如：

• 上面多渲染 5 条
• 下面多渲染 5 条

这样滚动更平滑。

2. 使用transform而不是频繁改top

一般会优先使用：

transform: translateY(...)

原因是：

• 性能通常更稳定
• 减少布局开销
• 更适合频繁更新

3. key 要稳定

v-for时一定要用稳定的唯一key，不要直接用 index，尤其列表项内部有状态时。

:key="item.id"

4. 避免列表项过重

虚拟列表已经减少了 DOM 数量，但如果每个列表项本身非常复杂，仍然会影响性能。
可以继续优化：

• 拆小组件
• 减少响应式依赖
• 避免过多 watcher
• 合理使用v-memo/shallowRef/markRaw等

5. 滚动事件节流

虽然虚拟列表通常直接依赖scroll更新，但某些复杂场景可以适当做节流或requestAnimationFrame合并更新，避免计算过于频繁。

6. 回到某个位置时的滚动恢复

实际项目中常见需求：

• 从列表页进详情页，再返回列表页
• 需要恢复到上次滚动位置

这时要缓存：

• scrollTop
• 当前 startIndex

这个回答会让你显得有实战经验。

十一、Vue 项目中如果是不定高怎么办？

这题是进阶。

你可以这样回答，不一定非要写完整代码，但思路一定要清楚。

思路

1. 先给每项估算高度

比如默认estimatedHeight = 80

2. 维护位置缓存表

类似：

[ { index: 0, height: 80, top: 0, bottom: 80 }, { index: 1, height: 80, top: 80, bottom: 160 } ]

3. 渲染后测量真实高度

通过：

• getBoundingClientRect()
• ResizeObserver

拿到真实高度后更新缓存。

4. 根据scrollTop二分查找起始索引

因为累计高度不规则，不能直接除。

5. 动态修正 totalHeight 和偏移量

让滚动条和内容位置逐步准确。

面试中建议这么说

如果在 Vue 项目里遇到不定高列表，我一般不会从零硬写完整方案，除非业务很特殊；更实际的做法是基于成熟库，或者在定高方案基础上增加高度缓存、渲染后测量和二分查找来处理。这类场景实现难点主要在高度动态变化和滚动定位精度。

这个回答非常真实。

十二、Vue 里可以用哪些成熟库？

这也是工程化加分项。

常见方案有：

• vue-virtual-scroller
• vueuc / VVirtualList
• element-plus table-v2（大表格场景）
• 某些 UI 库自带的虚拟滚动组件

你可以说：

在业务中，如果只是普通长列表，我可以自己封装定高虚拟列表；如果是复杂表格、多列、冻结列、不定高、动态展开收起等场景，我更倾向于用成熟库，因为它们在边界处理和性能调优上更稳定。

十三、面试官常追问的问题

1. 虚拟列表为什么性能好？

因为它减少了真实渲染的 DOM 数量，降低了浏览器的渲染、重排、重绘和框架 diff 成本，所以在大数据量列表场景下性能提升明显。

2. 既然只渲染一部分，为什么滚动条还能那么长？

因为通过一个 phantom 占位元素撑起了完整列表的总高度，浏览器认为整个滚动区域依然存在，只是实际渲染内容是局部的。

3. 为什么要有 offset 偏移？

因为可见数据不是从第 0 项开始渲染，而是从当前 startIndex 开始，所以需要把这部分内容移动到它在完整列表中的正确位置。

4. 虚拟列表会不会影响搜索、选中、展开等功能？

不会，但需要额外设计数据状态管理。因为 DOM 节点会复用或动态卸载，所以不能把关键状态只放在节点本身，而要放在数据层，比如选中状态、展开状态、输入值等都要由数据驱动。

这个回答特别加分。

5. 虚拟列表的缺点是什么？

这是非常好的加分点，很多人答不到。

缺点包括：

• 实现复杂，尤其不定高
• 锚点定位、自动滚动到底部等场景要额外处理
• SEO 场景不友好
• 列表项过于复杂时仍可能卡顿
• 动态展开/收起会导致高度计算复杂
• 与拖拽、动画结合时边界更多

你可以说：

虚拟列表不是银弹，它主要解决 DOM 过多的问题，但如果瓶颈在请求、计算逻辑、组件本身过重，仍然需要配合其他优化手段。

这句话非常成熟。

十四、面试中怎么回答更精彩？

建议按这个结构回答：

回答结构模板

第一步：定义

虚拟列表是一种长列表优化方案，核心是只渲染可视区域附近的少量节点，而不是一次性渲染全部数据。

第二步：为什么需要

因为一次渲染大量 DOM 会导致首屏慢、滚动卡顿和内存占用高，而用户同一时间其实只能看到少量内容。

第三步：原理

通过滚动容器 + 占位元素撑起总高度，再根据 scrollTop 计算 startIndex、endIndex，只截取这部分数据渲染，并通过 translateY 定位到正确位置。

第四步：区分定高和不定高

定高实现比较简单，可以直接用scrollTop / itemHeight计算索引；不定高需要维护高度缓存、测量真实高度，并用二分查找定位。

第五步：Vue 项目怎么做

在 Vue 项目里，如果是普通定高长列表，我会封装一个虚拟列表组件，核心用 computed 计算可视数据和偏移量；如果是复杂场景，比如不定高、大表格，我更倾向于使用成熟库。

第六步：工程细节

实际项目里我还会加 buffer 缓冲区、防止白屏，使用稳定 key，处理滚动恢复、状态持久化以及复杂场景下的性能问题。

十五、你可以直接背的标准答案

版本一：标准版

虚拟列表是一种针对长列表的性能优化方案，它的核心思想是只渲染当前可视区域附近的少量 DOM 节点，而不是把几千条、几万条数据一次性全部渲染出来。
这样做的原因是大量 DOM 会带来较高的渲染、diff 和内存开销，而用户同一时间其实只能看到屏幕内的一小部分内容。
实现上通常会有一个固定高度的滚动容器，再用一个 phantom 占位元素撑起整个列表的总高度。用户滚动时，根据scrollTop计算当前应该显示的数据区间，比如startIndex和endIndex，然后只渲染这部分数据，再通过translateY把内容移动到正确的位置。
如果是定高列表，实现相对简单，可以直接通过scrollTop / itemHeight计算索引；如果是不定高列表，则需要维护每项高度缓存、渲染后测量真实高度，并通过二分查找来定位。
在 Vue 项目中，如果是普通长列表，我会自己封装一个虚拟列表组件；如果是复杂表格或者不定高场景，我更倾向于使用成熟库来保证稳定性。

版本二：面试加分版

我理解虚拟列表本质上是在解决“大量数据不等于大量 DOM”的问题。
比如一个列表有一万条数据，如果全部渲染成 DOM，首屏会很慢，滚动也容易卡顿，因为浏览器和框架都要处理大量节点。但实际上用户同一时间只能看到十几条到几十条内容，所以完全没必要把所有项都渲染出来。
虚拟列表的核心做法是：用一个占位元素撑起完整滚动高度，让滚动条表现正常；然后根据当前scrollTop动态计算可视区间，只渲染这一小段数据，并通过translateY把它放到列表中的正确位置。
如果是定高列表，索引计算比较简单，直接用scrollTop / itemHeight就可以算出 startIndex；如果是不定高列表，就需要高度缓存、渲染后测量和二分查找来做精确定位。
在 Vue 项目中，我一般会把它封装成通用组件，接收列表数据、itemHeight、容器高度、buffer 等参数，通过computed计算 visibleData 和 offset。如果业务只是普通定高长列表，我可以自己实现；如果是复杂表格、不定高、动态展开收起这些场景，我会优先选择成熟的虚拟滚动库。
另外，真正落地时我还会关注缓冲区、防白屏、滚动位置恢复、列表项状态持久化，以及复杂列表项本身的渲染成本。

这个版本就非常像“做过项目的人”。

十六、Vue 面试中如果让你现场说实现步骤，可以这样说

在 Vue 里实现一个定高虚拟列表，我会先定义一个固定高度、可滚动的容器；然后根据列表总数和 itemHeight 计算出总高度，用一个 phantom 元素撑起来。
接着监听容器的 scroll 事件，根据scrollTop算出startIndex，再结合可视区域高度算出visibleCount和endIndex。
然后通过slice截取当前需要渲染的数据，放到真实内容层里渲染，并通过transform: translateY(startIndex * itemHeight)把内容移动到正确位置。
为了提升滚动体验，我通常还会额外加 buffer 缓冲区，上下多渲染几条，避免快速滚动时出现白屏。
如果是更复杂的不定高场景，我会维护每一项的高度缓存，并结合测量和二分查找来定位，或者直接使用成熟库来降低实现成本和边界风险。

十七、一分钟高分口述版

你可以直接背这个：

虚拟列表是一种长列表渲染优化方案，核心是只渲染可视区域附近的少量节点，而不是把所有数据一次性都挂到 DOM 上。
它的原理一般是：外层用一个可滚动容器，里面放一个 phantom 占位元素撑起完整高度；滚动时根据scrollTop计算当前可见区间，只截取这部分数据渲染，并通过translateY把渲染内容移动到正确位置。
定高列表比较容易实现，直接通过scrollTop / itemHeight就能算出 startIndex；不定高列表则需要高度缓存、动态测量和二分查找。
在 Vue 项目里，如果是普通定高长列表，我会封装一个虚拟列表组件，用 computed 计算 visibleData、startIndex 和 offset；如果是复杂场景，比如不定高或大型表格，我会优先采用成熟的虚拟滚动库。
实际落地时我还会加 buffer 缓冲区、防白屏、处理滚动恢复和列表项状态持久化。