Vue如何实现虚拟列表，能否用于长尾词的滚动查询？

本文共计10897个文字，预计阅读时间需要44分钟。

由于DOM性能瓶颈，大型列表存在难以克服的性能问题。因此，出现了局部渲染的优化方案，这是虚拟列表的核心思想。虚拟列表的实现需要重点关注以下问题：

因为 DOM 性能瓶颈，大型列表存在难以克服的性能问题。 因此，就有了 “局部渲染” 的优化方案，这就是虚拟列表的核心思想。

虚拟列表的实现，需要重点关注的问题一有以下几点：

• 可视区域的计算方法
• 可视区域的 DOM 更新方案
• 事件的处理方案

下面逐一分解说明。

可视区域计算

可视区域的计算，就是使用当前视口的高度、当前滚动条滚过的距离，得到一个可视区域的坐标区间。 算出可视区域的坐标区间之后，在去过滤出落在该区间内的列表项，这个过程，列表项的坐标也是必须能算出的。

思考以下情况，

• 我们的视口高度为 100px
• 我们当前已经滚动了 100px
• 我们的列表项，每一项高度为 20px
  

根据这些条件，我们可以计算出，当前可视区域为第 11 项至第 20 项。