Vue.js 学习笔记 - 虚拟列表(Virtual-Scroll-List)心得

虚拟列表

背景

手上有个字幕编辑器的项目，因为长视频也许会有几千条字幕，所以字幕编辑器的列表中就会有几千条列表项。 但是如果将这几千条列表项全部渲染在 DOM 中，就会造成浏览器轻则卡顿，重则卡死，根本无法正常使用。 针对这种情况，我通过 Google 了解到可以通过虚拟列表技术来解决。 虚拟列表做的事情，就是按需渲染。只需要渲染当前视图需要显示的几个条目和即将滚动到的几个条目。在开发者工具中可以发现，DOM 中只存在这么几条列表项，当滚动的时候会替换这几项。所以大大节省了系统资源，提升了用户体验。 我在 GitHub 上找了几个基于Vue.js 的虚拟列表实现，最终找到了一个最合适的 vue-virtual-scroll-list ，并在项目中进行了使用。 我在闲暇之余研读了一下此项目的代码，发现实现方式比想象中还要简单。

核心实现

this.$slots.default类型为数组，存储的是此组件两标签中的内容，在此特指大量的列表项。 通过 Vue 数组的 filter 方法，筛选出处于当前视图中的几个项，选择性的只渲染出这几个在 DOM 中。渲染是依据 Vue 的 render 函数来动态定义组件。

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
        })
    )
  }
}