虚拟列表
背景
手上有个字幕编辑器的项目，因为长视频也许会有几千条字幕，所以字幕编辑器的列表中就会有几千条列表项。 但是如果将这几千条列表项全部渲染在 DOM 中，就会造成浏览器轻则卡顿，重则卡死，根本无法正常使用。 针对这种情况，我通过 Google 了解到可以通过虚拟列表技术来解决。 虚拟列表做的事情，就是按需渲染。只需要渲染当前视图需要显示的几个条目和即将滚动到的几个条目。在开发者工具中可以发现，DOM 中只存在这么几条列表项，当滚动的时候会替换这几项。所以大大节省了系统资源，提升了用户体验。 我在 GitHub 上找了几个基于Vue.js 的虚拟列表实现，最终找到了一个最合适的 vue-virtual-scroll-list ，并在项目中进行了使用。 我在闲暇之余研读了一下此项目的代码，发现实现方式比想象中还要简单。
核心实现
this.$slots.default类型为数组，存储的是此组件两标签中的内容，在此特指大量的列表项。 通过 Vue 数组的 filter 方法，筛选出处于当前视图中的几个项，选择性的只渲染出这几个在 DOM 中。渲染是依据 Vue 的 render 函数来动态定义组件。
代码语言：javascript复制export default {
name: 'item',
props: [
'item',
'k'
],
render: function (createElement) {
return createElement(
'div',
this.$slots.default.filter(function (slot, index) {
return index > 5 && index < 10
})
)
}
}
