Vue3实现高性能虚拟列表的两种方法

正文

在前端开发中，大数据量列表渲染 一直是性能挑战。假设我们有一个 API 返回 1 万条数据，如果直接渲染到页面，必然会导致严重卡顿甚至浏览器崩溃。

解决方案就是 —— 虚拟列表 (Virtual List) 。

虚拟列表的核心思想是：只渲染当前视口范围内的元素，通过计算位置来“假装”完整渲染。

常见实现方式主要有两种：

1. Spacer 占位法
2. Absolute 定位法

本文将对比这两种实现，并给出适用场景。

1. Spacer 占位法实现

思路：用 上空白块 + 下空白块 撑出容器总高度，视口中只渲染真实元素。

<div ref="root" @scroll="onScroll"
     :style="{ overflowY: 'auto', height: containerHeight + 'px' }">
  <!-- 上占位 -->
  <div :style="{ height: topSpacer + 'px' }"></div>

  <!-- 可见元素 -->
  <div v-for="item in visibleItems" :key="item.id" class="virtual-item">
    {{ item.text }}
  </div>

  <!-- 下占位 -->
  <div :style="{ height: bottomSpacer + 'px' }"></div>
</div>

优点：

• 实现简单直观
• 支持动态高度（只要调整 spacer 值即可）

 缺点：

• 多余的 DOM（两个 spacer）
• 每次滚动都要更新 topSpacer 和 bottomSpacer，涉及 回流 (Reflow)

2. Absolute 定位法实现

思路：先撑出一个 固定高度的容器，每个 item 通过 absolute + top 定位。

<div ref="root" @scroll="onScroll"
     :style="{ overflowY: 'auto', height: containerHeight + 'px', position: 'relative' }">
  
  <!-- 总高度容器 -->
  <div :style="{ height: totalHeight + 'px', position: 'relative' }">
    <div v-for="(item, idx) in visibleItems"
         :key="item.id"
         class="virtual-item"
         :style="{ position: 'absolute', top: (startIndex + idx) * itemHeight + 'px' }">
      {{ item.text }}
    </div>
  </div>
</div>

优点：

• DOM 结构更简洁（没有 spacer）
• 绝对定位减少回流，性能更好
• 更适合大数据场景（5w+ 条时依然稳定）

缺点：

• 对自适应高度支持不友好（必须固定高度）
• position: sticky 等布局特性会失效

3. 性能对比

4. 实践建议

• 固定高度 item → 推荐 Absolute 定位法
  简洁高效，减少 DOM & 回流开销。
• 动态高度 item → 推荐 Spacer 占位法
  更容易适配复杂布局。
• 超大数据量 (5w+ 条) → Absolute 更稳

如果你要做一个通用组件，可以支持 两种实现方式切换：

• 默认使用 Absolute 定位法
• 如果检测到 item 高度不一致，再切换到 Spacer 占位法

这种混合策略，正是一些成熟虚拟列表库（如 react-window、vue-virtual-scroll-list）的做法。

5. 结论

• 两种方案都能解决虚拟列表问题
• Absolute 定位法 在固定高度场景下性能更优
• Spacer 占位法 更灵活，能支持动态高度

所以，选择哪种方案要根据 业务需求 来定。

到此这篇关于Vue3实现高性能虚拟列表的两种方法的文章就介绍到这了,更多相关Vue3高性能虚拟列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论