vue 实现数据滚动显示_通过 Vue 实现无限滚动列表（一）——思路与要点分析

业务代码中，最常使用的一类组件就是列表。在之前，当有很多列表需要展示时，会通过分页的方式来展现，通过分页能够保证高性能和适当的内存使用，但是不足之处在于，分页的切换会打断用户的浏览连贯性，同时也会增加用户的等待时间。

现在流行的长列表加载方式时，用户在即将滚动到页面底部时，就自动通过 ajax 请求下一页的内容，然后渲染在页面上，从而实现几乎无缝的浏览体验(排除网络状况不佳的情况)。但是这种方法也有缺点，那就是当用户不断浏览时，页面上的列表节点会越来越多，导致内存使用大大提升的同时，性能也跟着下降。

所以本文就来探讨一下无限滚动列表实现时的一些思路与要点。

列表渲染

要实现列表，最基础的当然就是将列表渲染出来了，通过 vue 我们只需要提供一组数据，就能够非常方便的渲染出一个列表。所以这一点在下午中不会赘述。

列表可见部分与不可见的计算与重渲染

要优化长列表的性能和内存，很容易想到的一个方向就是只对屏幕(或者列表容器)区域的可见列表进行渲染，而不可见部分的列表则不渲染。当列表滚动时，对于已经滚出屏幕外的列表项要移除，滚入屏幕内的列表项重新渲染。通过这种方式，保证 dom 中实际存在的列表项数量维持在一个低开销的状态。

同时，为了更好地用户体验，可以缓冲的列表项。如果当前屏幕只能显示 5 项，那么实际上可以将这 5 项前后的 3 项也同时渲染出来，一共渲染 11 项。这样当用户滚动时，上下各多出来的 3 项可以有效防止在新的列表还没完成渲染之前出现的部分空屏情况。