npm i vue-virtual-scroller

yarn add vue-virtual-scroller
vue-virtual-scroller 是一个 Vue 组件库，用于高效地渲染大量数据项，通过虚拟滚动来提升性能。它适用于长列表、网格、表格等场景

全局注册
在 main.js 中

import Vue from 'vue';
import { VirtualScroller, RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
Vue.component('virtual-scroller', VirtualScroller);
Vue.component('recycle-scroller', RecycleScroller);

局部注册
组件文件中

import { VirtualScroller, RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
export default {
  components: {
    VirtualScroller,
    RecycleScroller
  }
};

渲染一个长列表示例

<template>
  <div>
    <recycle-scroller
      :items="items"
      :item-size="50"
      key-field="id"
      v-slot="{ item }"
    >
      <div class="item">{{ item.name }}</div>
    </recycle-scroller>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: Array.from({ length: 10000 }).map((_, index) => ({
        id: index,
        name: `Item ${index}`
      }))
    };
  }
};
</script>
 
<style>
.item {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ccc;
}
</style>

参数解释
items：要渲染的项列表。
item-size：每个项的高度或宽度（垂直滚动时为高度，水平滚动时为宽度）。
key-field：项的唯一键字段。

其他选项
vue-virtual-scroller 提供了许多其他选项和事件来定制你的滚动行为。以下是一些常用的：

type：设置滚动方向（‘vertical’ 或 ‘horizontal’）。
min-item-size：项的最小尺寸，用于估计尺寸。
buffer：设置缓冲区的大小，以便在滚动时提前加载项。
page-mode：设置为 true 时，将使用窗口滚动而不是组件内滚动。
————————————————

https://github.com/Akryum/vue-virtual-scroller/tree/master