比较了 vue-virtual-scroller 和 quasar 的 QVirtualScroll 的使用

vue-virtual-scroller

专门的虚拟滚动库，比较可靠。

npm install --save vue-virtual-scroller

RecycleScroller 固定 item 高度的虚拟滚动组件。

<RecycleScroller
  class="scroller"
  :items="list"
  :item-size="32"
  key-field="id"
  v-slot="{ item }"
>
  <div class="user">
    {{ item.name }}
  </div>
</RecycleScroller>

缺点：无法使用横向滚动条，如果需要制作可横向滚动的制作就不太方便。

quasar 的 QVirtualScroll

quasar 这个 UI 库中，提供了一些虚拟滚动的组件。

文档： http://www.quasarchs.com/vue-components/virtual-scroll

安装：（需要安装相关的 vue-cli-pulgin 才能正常运行，所以使用 vue add 来安装）

vue add quasar

引入：

import 'quasar/dist/quasar.css'
import {
  Quasar,
  QVirtualScroll
} from 'quasar'

Vue.use(Quasar, {
  components: {
    QVirtualScroll
  }
})

为了在使用大列表时获得最佳性能，使用Object.freeze(items)冻结在items属性中传递的数组。这让 Vue 取消对列表更改的响应式监听。

使用virtual-scroll-item-size指定元素的大小。如果不使用此属性，仍然可以使用，但体检和性能会没那么好。

<template>
  <q-virtual-scroll
    style="max-height: 300px;"
    :items="heavyList"
    separator
  >
    <template v-slot="{ item, index }">
      <div :key="index">
        {{ index }} - {{ item.label }}
      </div>
    </template>
  </q-virtual-scroll>
</template>

还有一个表格类型。配合 position: sticky 可以实现表头固定、最左或最右侧列固定。参考：

• 表格类型及表头滚动： http://www.quasarchs.com/vue-components/virtual-scroll#%E8%A1%A8%E6%A0%BC%E7%B1%BB%E5%9E%8B
• 列滚动： http://www.quasarchs.com/vue-components/table#%E7%B2%98%E6%80%A7%E6%A0%87%E9%A2%98%2F%E5%88%97

可通过它，实现树形控件和表格控件。实现树形控件比上个插件好的是它可以给每个item设置宽度，如600px，盒子宽度300px，就不至于超出300px的部分完全看不到，还可以有个横向滚动条。