vue 3 中用 vue-virtual-scroller 实现虚拟滚动，核心是自动渲染可视区域；需安装 @next 版本，用 recyclescroller（固定高度）或 dynamicscroller（动态高度），支持 scrolltoitem 精准跳转。

Vue 3 中用 vue-virtual-scroller 实现列表虚拟滚动，核心是让“只渲染可视区域”这件事自动发生，而不是手动监听 scroll、计算索引、更新 slice —— 库已经把滚动逻辑、占位高度、位置偏移、缓冲区管理全封装好了，你只需按规范传数据和配置。

安装与基础接入

先装对版本：Vue 3 项目必须用 @next 版本，否则会报兼容错误：

• npm install vue-virtual-scroller@next
• 在组件中引入样式和组件：import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' 和 import { RecycleScroller } from 'vue-virtual-scroller'
• 模板中直接使用：<recyclescroller></recyclescroller>，它会自动接管容器滚动行为，不需要额外绑定 @scroll 或 ref

固定高度场景（最常用）

当每条数据渲染后高度一致（比如都是 64px），这是性能最优、配置最简的模式：

vue3-ant-design-vue-component-skill

封装基于 Vue 3 + Ant Design Vue 的通用业务组件，提供标准化模板与最佳实践。

下载

• 通过 :item-size="64" 告诉组件单条高度
• :items="list" 传整个原始数组，不用切片、不用分页
• key-field="id" 指定唯一标识字段，避免 key 冲突
• 内部用 v-slot="{ item }" 解构渲染，item 就是当前可见项，无需手动算索引

动态高度支持（内容不等高）

标题长度不同、有富文本摘要、带图片的公告列表，就得用 DynamicScroller：

• 替换组件为 <dynamicscroller></dynamicscroller>，样式引入不变
• 去掉 :item-size，改用 v-slot="{ item, index, active }"，靠 active 判断是否已进入视口
• 每条渲染时需包裹在 <dynamicscrolleritem :item="item" :active="active"></dynamicscrolleritem> 中，它会自动测量并缓存高度
• 首次加载可能略慢（要真实渲染测高），但后续滚动完全复用，体验依然顺滑

滚动定位与可控跳转

想点导航栏“第 892 条”，或搜索后自动滚到目标项？vue-virtual-scroller 提供了 scrollToItem(index) 方法：

• 给 <recyclescroller></recyclescroller> 加 ref="scroller"
• 调用 scroller.value.scrollToItem(891)（注意索引从 0 开始）
• 它会精确滚动到该条顶部，且不会触发重渲染——因为底层靠 transform: translateY 移动整块内容，不是靠 scrollTop 强刷
• 配合 debounce 或 nextTick 可避免跳转时机错乱

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！