vue实现一个基础的虚拟列表

原文链接：https://blog.csdn.net/weixin_44427784/article/details/125446508

什么是虚拟列表

        只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染，以实现减少消耗，提高用户体验的技术。它是长列表的一种优化方案，性能良好。

解决问题

        当数据体量极大时，使用虚拟列表，可以极大减少节点的渲染，性能好，体验丝滑。

实现步骤

（1）写一个代表可视区域的div，固定其高度，通过overflow使其允许纵向 Y 轴滚动。

（2）计算区域中可以显示的数据条数。这个用可视区域的高度除以单条数据高度得到。

（3）监听滚动，当滚动条变化时，计算出被卷起的数据的高度。

（4）计算区域内数据的起始索引，也就是区域内的第一条数据：这个用卷起的高度除以单条数据高度可以拿到。

（5）计算区域内数据的结束索引。通过起始索引+可显示的数据的条数可以拿到。

（6）取起始索引和结束索引中间的数据，渲染到可视区域。

（7）计算起始索引对应的数据在整个列表中的偏移位置并设置到列表上。

整个步骤下来，最终的效果是：不论怎么滚动，我们改变的只是滚动条的高度和可视区的元素内容。每次只会渲染一个固定的条数，不会增加多余元素。

demo如下，可复制到vue项目中运行：