在 Vue 3 中优化长列表滚动性能，最稳妥的方案是引入虚拟滚动技术，通过只渲染可视区域内的 DOM 节点来降低内存和计算压力，适合数据量超过百条且需要流畅滚动的场景。

命令速用版

如果你确定需要优化，可以直接使用以下命令安装 Vue 3 兼容版本的虚拟滚动库：

npm install vue-virtual-scroller

或者使用 yarn：

yarn add vue-virtual-scroller

安装完成后，需要在 main.js 中引入样式和组件，或者在单文件组件中局部引入。注意版本兼容性，Vue 3 项目建议使用 2.x 版本。

为什么会这样

传统列表使用 v-for 渲染时，浏览器会一次性创建所有数据对应的 DOM 节点。当数据量达到几千甚至上万条时，会产生两个主要问题：

首先是内存占用过高。每个 DOM 节点都会占用内存，大量节点可能导致移动端浏览器崩溃。虚拟滚动方案可显著控制内存占用。

其次是重绘卡顿。滚动时浏览器需要不断计算布局和重绘，低端设备帧率可能明显下降，用户会明显感受到卡顿。虚拟滚动的核心思想是只渲染可视区域内的元素，就像剧院里的聚光灯，只照亮舞台中央的演员，观众席其他区域都处于黑暗中。通过动态计算可视区域，将 DOM 节点数量控制在恒定范围，从而提升性能。

分步处理

第一步：引入组件

在 main.js 中全局引入：

import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

app.use(VueVirtualScroller)

或者在组件内局部引入：

import { RecycleScroller } from 'vue-virtual-scroller'

第二步：替换模板结构

将原有的 v-for 循环替换为 RecycleScroller 组件。注意父容器必须有固定高度：

<template>
  <div class="demo-container">
    <RecycleScroller
      class="scroller"
      :items="list"
      :item-size="50"
      key-field="id"
      v-slot="{ item }"
    >
      <div class="item">{{ item.content }}</div>
    </RecycleScroller>
  </div>
</template>

第三步：配置关键样式

虚拟滚动依赖容器高度计算可视区域，必须为容器和列表项设置明确 CSS 样式：

.demo-container {
  height: 400px; /* 必须设置固定高度 */
  overflow: auto;
}

.scroller {
  height: 100%;
}

.item {
  height: 50px; /* 必须与 item-size 一致 */
  box-sizing: border-box;
}

第四步：配置关键参数

item-size 必须与列表项的实际高度一致。如果列表项高度不固定，建议使用 DynamicScroller 组件，并设置 min-item-size 参数。min-item-size 是最容易出错的参数，如果设置过小，会出现滚动跳动；过大则影响性能。

怎么验证是否生效

打开 Chrome DevTools 的 Performance 面板进行录制，滚动列表时观察以下指标：

1. FPS 波动：流畅滚动需要 60fps，快速滚动时帧率不应大幅下跌。

2. 内存占用：观察内存曲线是否平稳，传统方式在大数据量下内存占用可能持续飙升。

3. DOM 节点数：在 Elements 面板检查列表容器内的子节点数量，虚拟滚动应维持在几十个小范围内，而不是随数据量线性增长。

性能对比测试显示，虚拟列表在大数据量下能保持稳定帧率，而传统渲染可能出现明显卡顿。

常见坑

1. 容器高度未固定：虚拟滚动依赖容器高度计算可视区域，父容器必须设置明确的高度，否则无法正常工作。

2. 行高设置不准：item-size 与实际 CSS 高度不一致会导致滚动位置计算错误，出现内容重叠或空白。

3. 动态高度处理：如果列表项高度不一致，不要硬写死 item-size，应使用 DynamicScroller 并配合 min-item-size 预估最小高度。

4. 样式隔离问题：确保引入了库的 CSS 文件，否则滚动条和占位元素可能显示异常。

5. 首屏白屏：服务端渲染时需注意虚拟列表的特殊处理，避免首屏无法正确计算高度。

参考来源

• vue-virtual-scroller GitHub 仓库：https://github.com/Akryum/vue-virtual-scroller
• vue-virtual-scroller NPM 页面：https://www.npmjs.com/package/vue-virtual-scroller