.viewport{宽度：500px；高度：500px；溢出：滚动；}.v-list-item{height:100px;width:100%;background:#fff;color:#000;line-height:100px;border-bottom:1pxsolid#ccc;}前言虚拟列表是前端长列表优化的解决方案。就是把一个需要渲染所有列表项的长列表改成只渲染可见区域的列表项，但是滚动效果还是一样的。与渲染所有列表项的长列表相同。使用场景：移动端使用下拉加载数据时，随着数据不断从服务端拉取，数据列表的内容越来越多，导致创建了很多节点。这时候Vue的diff需要多次比较，导致性能消耗和内存占用。渲染长列表中的大量节点带来的问题：占用大量GPU资源，导致卡顿的节点越多，性能消耗越多。虚拟列表的实现有两种：列表项的高度是固定的，列表项的高度是动态的。下面以列表项固定高度为例。编码前需要了解的信息：容器高度（可见区域高度）：视口列表项高度：itemSize可视区域显示列表个数：viewCount列表长度：phantomHeight（itemSize*列表个数）第一个元素顶部距离：startOffset开始元素的下标：startIndex结束元素的下标：endIndex重点是确定要渲染的列表个数，然后根据滚动动态改变startIndex、endIndex、startOffset值，然后过滤和切割列表项数据。获取需要渲染的数据列表。实际代码如下：<模板>{{startIndex}}{{endIndex}}{{item.num}}
