一款高性能的Vue虚拟列表组件，支持大量数据列表

最近有个需求，后端返回几千条数据，需要针对这些大量数据渲染，如果直接 v-for 直接渲染会导致卡顿，那么如何才能高效渲染大数据量列表，经过几天几夜查找，最终终于让我找到了一款非常牛的 Vue 组件，可以实现大数据量渲染

vue-virtual-scroll-list

vue-virtual-scroll-list 是一款能支持大数据量列表渲染的 Vue 组件。除了固定高度渲染之外，还支持以下功能特性

支持配置头部，底部 slot，允许自定义渲染头部和底部
支持横向大数据滚动
支持动态高度渲染
支持无限滚动加载数据
支持状态选中功能
支持分页模式

可以看出 vue-virtual-scroll-list 的功能非常强大，完全满足常见场景需求。接下来实现下如何实现固定高度渲染

引入组件

npm install vue-virtual-scroll-list --save

通过 components 属性引入 VirtualList 组件，这里需要注意下，virtual-list 组件需要设置固定高度，这样才能出现滚动条。

data-sources 是配置的大数据数组，data-component 配置的是需要渲染的每一行数据，是一个组件，keeps 配置需要渲染多少行数据，如果容器高度不是很高，可以配置为 10，这样性能会更好

<template>
  <div>
    <virtual-list
      style="height: 360px; overflow-y: auto;"
      :data-key="'uid'"
      :data-sources="items"
      :data-component="itemComponent"
      :keeps="{40}"
    />
  </div>
</template>
<script>
  import Item from './Item'
  import VirtualList from "vue-virtual-scroll-list";
  export default {
    name: "app",
    components: { "virtual-list": VirtualList },
    data() {
      return {
        itemComponent: Item;
        items: [{ id: 1, name: "a" }, { id: 2, name: "b" } ...],
      };
    },
  };
</script>