当列表数据达到几千甚至几万条时，直接用 v-for 全量渲染 DOM，页面会出现明显的卡顿，滚动掉帧严重，甚至浏览器直接假死。原因很简单：浏览器渲染几万个 DOM 节点的开销是巨大的，内存占用、布局计算、重绘都会随之暴涨。虚拟列表的核心思想是只渲染可视区域内的条目，滚动时动态替换渲染的内容，让 DOM 数量始终维持在一个很小的常数级。本文从原理到实现，带你彻底搞懂 Vue 3 中虚拟列表的写法。
虚拟列表的核心原理：为什么只渲染可视区域能解决卡顿
浏览器每帧能承受的渲染工作量是有限的，通常希望保持在 16ms 以内才能稳定 60fps。当列表有一万条数据时，每条数据哪怕只生成 5 个 DOM 节点，总量也会达到 5 万个节点。初始化渲染时会触发长时间的布局与绘制，主线程被阻塞，用户输入得不到响应。而实际上用户同一时间能看到的条目可能只有 20 条，渲染另外 9980 条纯属浪费。
虚拟列表的思路可以概括为三步：第一，用一个高度与完整列表相同的占位容器撑起滚动条，让用户产生列表完整存在的错觉；第二，监听滚动容器的 scrollTop，根据条目高度计算出当前可视区域对应的数据索引范围，比如第 100 条到第 120 条；第三，只把这 20 条数据渲染出来，并用 transform: translateY 或 paddingTop 把它们平移到正确的视觉位置。整个过程中 DOM 节点数恒定在几十个，无论数据是 1 万条还是 100 万条，渲染开销几乎不变。
理解了原理后可以发现，实现虚拟列表需要维护几个关键状态：可视区起始索引 startIndex、结束索引 endIndex、滚动偏移量 offset。下面用 Vue 3 的组合式 API 来实现。
固定高度虚拟列表的完整实现
先实现最简单的情况：每条数据的高度固定，比如都是 48px。核心计算逻辑放在一个 composable 中：
import { ref, computed } from 'vue'
export function useVirtualList(props) {
const scrollTop = ref(0)
// 可视区域高度，实际项目中可通过 ResizeObserver 动态获取
const viewportHeight = ref(600)
// 额外上下各渲染 5 条作为缓冲，避免快速滚动出现白屏
const buffer = 5
const visibleCount = computed(() =>
Math.ceil(viewportHeight.value / props.itemHeight)
)
const startIndex = computed(() =>
Math.max(0, Math.floor(scrollTop.value / props.itemHeight) - buffer)
)
const endIndex = computed(() =>
Math.min(props.items.length - 1, startIndex.value + visibleCount.value + buffer * 2)
)
// 可视数据切片
const visibleItems = computed(() =>
props.items.slice(startIndex.value, endIndex.value + 1)
)
// 上方占位高度，用来撑出整体滚动高度并把内容推到正确位置
const offsetY = computed(() => startIndex.value * props.itemHeight)
const totalHeight = computed(() => props.items.length * props.itemHeight)
const onScroll = (e) => {
scrollTop.value = e.target.scrollTop
}
return { visibleItems, offsetY, totalHeight, onScroll }
}对应的组件模板如下，外层容器负责滚动，内层用总高度撑开滚动条，列表内容通过 translateY 偏移：
<template>
<div class="viewport" @scroll="onScroll">
<div class="list-phantom" :style="{ height: totalHeight + 'px' }"></div>
<div class="list-body" :style="{ transform: `translateY(${offsetY}px)` }">
<div v-for="item in visibleItems" :key="item.id" class="list-item">
{{ item.text }}
</div>
</div>
</div>
</template>
<style scoped>
.viewport {
height: 600px;
overflow-y: auto;
position: relative;
}
.list-phantom {
position: absolute;
top: 0;
left: 0;
width: 1px;
}
.list-body {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.list-item {
height: 48px;
line-height: 48px;
padding: 0 16px;
border-bottom: 1px solid #eee;
}
</style>这里有几个容易踩坑的细节需要注意。占位元素用绝对定位而内容用 translateY，可以避免占位高度变化时的布局抖动。缓冲区的意义在于快速滚动时，用户看到的新条目往往还来不及渲染，出现短暂白屏，多渲染几条可以显著缓解这个问题。另外滚动事件的触发频率非常高，虽然 Vue 的响应式更新天然做了批处理，但如果计算逻辑较重，也可以考虑配合 requestAnimationFrame 节流。
不定高条目的处理方案
真实业务中列表项高度经常是不固定的，比如包含多行文字的消息列表。这时无法用简单乘法计算位置，通常采用预估高度加动态测量修正的策略。思路是先用一个预估高度估算每条数据的位置，得到初始的 startIndex；渲染后用 ResizeObserver 实测每条的真实高度，如果与预估不符就更新缓存并重新计算后续条目的位置。
// 用数组缓存每条的真实高度和累计偏移量
const measuredHeights = new Map() // id -> 实测高度
const estimatedHeight = 50
function getItemOffset(index) {
let offset = 0
for (let i = 0; i < index; i++) {
const h = measuredHeights.get(props.items[i].id)
offset += h ?? estimatedHeight
}
return offset
}
// 渲染后测量真实高度，若变化则修正缓存
function measureItem(id, el) {
const h = el.offsetHeight
if (h !== measuredHeights.get(id)) {
measuredHeights.set(id, h)
// 重新计算偏移，触发视图更新
}
}遍历累加的方案在数据量极大时存在性能隐患，每次滚动都要从头累加偏移量，复杂度是 O(n)。优化方式是维护一个前缀和数组，条目高度变化时只做局部更新，或者干脆采用基于二分查找的区间树结构。如果业务允许，更省事的做法是引入成熟方案，比如 vueuse 提供的 useVirtualList，或者 element-plus 表格组件内置的虚拟化能力，它们已经处理好了不定高、动态测量、滚动修正这些边角问题。
一个实用建议：如果能通过 UI 设计把条目高度约束为固定值，就优先固定高度，实现简单且几乎不会出问题；不定高方案留作兜底。
总结一下，Vue 3 写虚拟列表的关键在于三个 computed：根据 scrollTop 算出可见区间、切片数据、计算偏移量。固定高度场景几十行代码就能搞定，不定高场景则需要测量与修正机制。当你的页面因为长列表而卡顿时，虚拟列表几乎永远是最值得优先尝试的优化手段，它带来的性能提升是数量级的。