前端性能优化--虚拟列表的使用（在vue中使用vue-virtual-scroll-list详解）

使用步骤：

1. 安装 npm i vue-virtual-scroll-list（ 我本地安装的版本 是"vue-virtual-scroll-list": "^2.3.4"）
2. 在需要使用虚拟列表加载的页面引入 import VirtualList from 'vue-virtual-scroll-list'
3. 创建一个item组件用于每一行数据的展示

<template>
  <div class="item">
      <div>{{source.name}}</div>
      <div >{{source.age}}</div>
      <div>{{source.hobby}}</div>
  </div>
</template>

<script>
export default {
  name: 'Item',
  props: {
    source: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  methods: {},
  mounted() {}
}
</script>

<style  lang="scss" scoped>
.item {
    //这里写一些需要的样式
}
</style>

4. 在主页面使用（注意：在使用这个插件的时候，会出现滚动区域下方大量留白而导致数据显示不全的问题，这种情况下，可以将keeps的条数适量加大一些。满足：(keeps * item的高度) > maxHeight）

 <template>
  <div class="main">
     <VirtualList v-if="dataList.length>0"
                             :style="{maxHeight:'100x',padding: '0 6px 0 0', overflowY: 'auto' }"
                             :data-key="'id'"
                             :keeps="3"
                             :data-sources="dataList"
                             :data-component="virtualComponent"></VirtualList>
  </div>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'
import Item from './item'

export default {
  data() {
    return {
      virtualComponent:Item,
      dataList: [
        {
          id: 0,
          name: '张三',
          age: 18,
          hobby: '打羽毛球'
        },
        {
          id: 1,
          name: '李四',
          age: 18,
          hobby: '看书'
        },
        {
          id: 2,
          name: '关羽',
          age: 28,
          hobby: '骑马'
        },
        {
          id: 3,
          name: '刘备',
          age: 20,
          hobby: '旅游'
        }
      ]
    }
  },
  components: {
    VirtualList,
    HotItem
  },
  methods: {},
  mounted() {}
}
</script>

<style  lang="scss" scoped>
.main {
}
</style>