快速实现虚拟列表

前言

虚拟列表（Virtual List）主要用于解决 大数据量列表渲染的性能问题，核心原理是只渲染可视区域内的元素，而非一次性渲染整个长列表，从而大幅减少 DOM 节点数量，提升性能。

使用场景：超长列表渲染、移动端应用、实时数据更新的高频场景、拖拽排序、动态高度等。

一、vue

vue3实现(vue-virtual-scroller@next)

安装 npm i vue-virtual-scroller@next

在main中引入

	import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
	import VueVirtualScroller from 'vue-virtual-scroller'; 
	app.use(VueVirtualScroller);

使用

<template>
    <div class="box">
        <RecycleScroller
            :items="bigArray" 
            :prerender="10"
            :buffer="32"
            :item-size="32"
            key-field="id"
            item-class="item">
            <template v-slot="{ item }">
                <div class="item">
                    {{ item.data }}
                </div>
            </template>
        </RecycleScroller>
    </div> 
</template>

<script setup>
import { ref } from 'vue' 
const bigArray = ref(
    Array.from({ length: 10000 }, (_, i) => ({
        id: i + 1,
        data: `Item ${i + 1}`
    }))
)
</script>
</script>

效果

具体项配置可参考官网vue-virtual-scroller

vue3实现(useVirtualList)

安装 npm i @vueuse/core

使用

import { useVirtualList } from '@vueuse/core'

const { list, containerProps, wrapperProps } = useVirtualList(
  Array.from(Array.from({ length: 99999 }).keys()),
  {
    // Keep `itemHeight` in sync with the item's row.
    itemHeight: 22,
  },
)

配置

状态	类型	描述
itemHeight	number	确保正确计算 wrapper 元素的总高度
itemWidth	number	确保正确计算 wrapper 元素的总宽度
overscan	number	预渲染 DOM 节点的数量。如果滚动速度非常快，可以防止项目之间出现空白

• itemHeight 或 itemWidth 必须与渲染的每行的高度保持同步。如果你在滚动到列表底部时看到额外的空白或抖动，请确保 itemHeight 或 itemWidth 与行的高度相同。

官网useVirtualList

二、react实现(react-window)

安装：npm install react-window

使用

import { VariableSizeList as List } from 'react-window';

const Row = ({ index, style }) => <div style={style}>Item {index + 1}</div>;

const VirtualList = () => (
	<List height={500} itemCount={1000} itemSize={() => 50} width={300}>
		{Row}
	</List>
);

export default VirtualList;

效果

具体项配置可参考react-window