当前位置：首页 > VUE

vue虚拟列表实现

2026-02-20 04:08:33VUE

Vue 虚拟列表实现原理

虚拟列表（Virtual List）是一种优化长列表渲染性能的技术，通过仅渲染可视区域内的元素，减少DOM节点数量。核心原理是根据滚动位置动态计算需要渲染的列表项。

基础实现步骤

计算可视区域高度 通过容器元素的clientHeight确定可视区域高度，通常需要固定容器高度或使用CSS明确设置。

计算列表项高度 若列表项高度固定，直接使用固定值；若高度动态变化，需通过ResizeObserver或渲染后测量获取实际高度。

动态渲染逻辑 根据滚动位置计算起始索引（startIndex）和结束索引（endIndex），使用slice截取需要渲染的数据片段。通过transform: translateY()偏移占位元素模拟完整列表高度。

<template>
  <div class="virtual-list" @scroll="handleScroll" ref="container">
    <div class="phantom" :style="{ height: totalHeight + 'px' }"></div>
    <div class="content" :style="{ transform: `translateY(${offset}px)` }">
      <div v-for="item in visibleData" :key="item.id" class="list-item">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

动态高度处理

预计算高度 对于动态高度项，可预先渲染少量项并测量高度，存入数组供后续计算使用。滚动时根据已缓存高度快速定位。

vue虚拟列表实现

动态调整策略 遇到未缓存高度的项时，渲染后立即测量并更新缓存。需注意快速滚动时可能引发多次重排，可通过防抖优化。

// 示例：动态测量高度
updateItemSize(index) {
  const item = this.$refs.items[index];
  if (item) {
    const height = item.clientHeight;
    this.sizeCache[index] = height;
    this.totalHeight = this.sizeCache.reduce((sum, h) => sum + h, 0);
  }
}

性能优化技巧

缓冲区扩展 可视区域外扩展额外渲染的缓冲区项（如前多渲染5项），避免快速滚动时出现空白。

回收DOM节点 对不可见项使用v-if而非v-show彻底销毁DOM，减少内存占用。需注意频繁创建/销毁的代价。

vue虚拟列表实现

滚动节流 使用requestAnimationFrame或lodash.throttle控制滚动事件频率，避免过度计算。

现有库推荐

vue-virtual-scroller
提供RecycleScroller和DynamicScroller组件，支持动态高度和横向滚动。
安装：npm install vue-virtual-scroller
vue-virtual-scroll-list
轻量级实现，适合固定高度项的场景。
安装：npm install vue-virtual-scroll-list

// vue-virtual-scroller 示例
import { RecycleScroller } from 'vue-virtual-scroller';
export default {
  components: { RecycleScroller },
  template: `
    <RecycleScroller
      :items="items"
      :item-size="50"
      key-field="id"
    >
      <template v-slot="{ item }">
        <div>{{ item.text }}</div>
      </template>
    </RecycleScroller>
  `
};