虚拟滚动列表的核心是只渲染可视区域内的元素，其vue实现需精确计算滚动位置、动态截取数据、复用dom、监听滚动更新视图：1.基于scrolltop计算可见项范围；2.用ref监听滚动并节流处理；3.用占位div撑高+transform定位渲染项；4.支持动态高度时需缓存高度并二分查找。
虚拟滚动列表的核心是只渲染可视区域内的元素，避免一次性渲染大量 DOM 节点。Vue 中实现的关键在于：精确计算滚动位置、动态截取数据片段、复用 DOM 元素、监听滚动并更新视图。
1. 基于 scrollTop 动态计算可见项范围
不依赖第三方库，直接监听容器的 scroll 事件，结合容器高度、单行高度和总数据量，算出当前应显示的起始索引和结束索引。
- 假设每行固定高度为 40px，容器高 400px，则最多显示约 10 行
- 滚动距离 scrollTop ÷ 40 得到首项偏移索引（向下取整）
- 结束索引 = 起始索引 + 显示行数 + 缓冲行数（如 +3 上下各留几行防白屏）
- 用 Math.max 和 Math.min 保证索引不越界
2. 使用 ref 定位容器并监听滚动
给外层容器加 ref="container"，在 mounted 中绑定原生 scroll 事件，避免使用 v-on:scroll 导致频繁触发影响性能。
- 用 debounce 或 requestIdleCallback 节流滚动处理逻辑（简单场景可用 throttle）
- 滚动时仅更新 start 和 end 响应式变量，触发视图重绘
- 注意在 beforeUnmount 中移除事件监听器
3. 渲染真实 DOM 时保留物理位置
即使只渲染部分数据，也要让列表整体高度撑开，使滚动条自然存在且比例正确。
- 外层容器设 height: 100%，内部用一个空 div 占位，height = 总行数 × 单行高度
- 实际渲染的 item 使用 transform: translateY() 定位，避免重排
- 每个 item 的 style.transform = `translateY(${index * 40}px)`，保持原始顺序感
4. 支持动态高度（可选进阶）
若行高不固定，需维护一个高度映射表（如 Map
- 用 IntersectionObserver 或 offsetHeight 异步测量可见项高度
- 滚动过程中按需补测未记录高度的项，逐步构建高度数组
- 总高度 = 高度数组前缀和，定位逻辑改为二分查找确定起始索引
不复杂但容易忽略：滚动锚点要稳定，避免因内容变化导致跳动；key 必须用唯一标识而非 index；首次加载建议预设 start/end 避免白屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
