组合式 API 实现虚拟滚动的核心是将“只渲染可视区域”拆解为可复用、响应式、易维护的逻辑单元；依托 setup + ref + watchEffect + 生命周期钩子管理 containerRef、data、itemHeight 等响应式状态，通过滚动监听计算 visibleStart/visibleEnd 范围，并用 padding 或 transform 模拟占位实现高效渲染。
用组合式 API 实现虚拟滚动，核心是把“只渲染可视区域”这个逻辑拆解为可复用、响应式、易维护的逻辑单元。Vue 3 的 setup + ref + watchEffect + 生命周期钩子，天然适合封装滚动计算、DOM 复用和位置偏移模拟。
关键变量与响应式状态管理
在 setup 中定义几个决定行为的基础响应式变量：
-
containerRef：绑定滚动容器，用于读取
clientHeight、scrollTop和监听事件 -
data：原始数据源（建议用
ref或computed，避免频繁重算） - itemHeight：单行固定高度（虚拟滚动高效前提；若需动态高度，需额外缓存高度映射表）
- visibleStart / visibleEnd：当前可视区域的数据索引范围，由滚动位置实时推导
- paddingTop / paddingBottom：用 CSS padding 撑开总高度，维持滚动条比例和自然拖拽感
滚动监听与可视范围计算
不依赖第三方库时，直接在 onMounted 中绑定原生滚动事件，并用防抖优化高频触发：
- 监听
containerRef.value.onscroll，读取scrollTop - 计算
startIdx = Math.max(0, Math.floor(scrollTop / itemHeight) - bufferSize) - 计算
endIdx = Math.min(data.length, startIdx + visibleCount + 2 * bufferSize) - 其中
visibleCount = Math.ceil(containerRef.value.clientHeight / itemHeight)，bufferSize通常取Math.max(3, visibleCount / 2) - 将
startIdx和endIdx同步到响应式变量，触发视图更新
DOM 复用与渲染控制
模板中不遍历全量数据，而是只对 data.slice(visibleStart, visibleEnd) 渲染：
- 每一项使用
:key="index + visibleStart"确保复用稳定性（避免因索引偏移导致 Vue 误判） - 外层容器设置
:style="{ paddingTop: `${paddingTop}px`, paddingBottom: `${paddingBottom}px` }"` -
paddingTop = visibleStart * itemHeight，paddingBottom = (data.length - visibleEnd) * itemHeight - 配合
transform: translateY(...)可进一步替代 padding（更利于 GPU 加速，但需注意兼容性）
与 Vuetify useVirtual 协同使用
如果项目已用 Vuetify 3，推荐直接调用其内置的 useVirtual 组合式函数：
- 它已封装好尺寸计算、缓冲区管理、偏移量防抖更新和滚动事件节流
- 只需传入
containerRef、data、itemHeight，即可获得{ listStyle, visibleItems, scrollToIndex }等返回值 -
listStyle包含自动计算的height和padding，开箱即用 - 支持动态高度模式（通过
getSize回调返回每项实际高度），但会略微增加计算开销
