最近在开发项目中遇到一个需求，需要实现一个渲染上千条数据的列表，但如果一次渲染出这么多DOM节点对性能会是很大的消耗。于是上github找了一下相关的优化方案，最终找到一个组件 https://github.com/Akryum/vue-virtual-scroller，它能把渲染DOM节点的数量控制在一定范围内，仅仅是渲染当前屏幕所看到的部分DOM节点，从而实现优化。

参考了vue-virtual-scroller的实现思路，我根据自己项目的需求又开发了一个滚动复用组件，虽然功能没有vue-virtual-scroller那么全面，但更简单易用，不到100行代码，更适合引入项目使用。

在线demo:  http://gavincat.cn/RecycleScrollerDemo

源码链接:  https://github.com/752848087coder/RecycleScroller

实现原理：

如上图所示：

最外层recycle-scroller节点需要设置一个固定高度，它代表可视区域。

中间层recycle-scroller-holder节点高度为渲染所有数据的总高度，它目的在于撑出recycle-scroller的滚动条。

最内层recycle-scroller-wrapper包裹我们实际渲染的数据，它会预加载上一屏与下一屏的数据，在滚动时进行复用。通过改变recycle-scroller-wrapper的纵向偏移量（translateY的值）使得实际渲染的数据一直出现在可视范围内，不变更新渲染的数据，模拟滚动的效果。