[JavaScript知识库]Vue中 引入使用 vue-virtual-scroll-list 通过虚拟列表滚动加载，解决数据量过多时 页面卡顿、体验差的问题

1. 简介

vue-virtual-scroll-list npm 地址
vue-virtual-scroll-list 主页
安装

npm i vue-virtual-scroll-list

对比
通过 v-for 渲染 10000 个节点，当页面展示94~100区间内的数据时，我们发现浏览器实际将 10000 条数据全部渲染出来了，这很容易导致页面卡顿。

通过 vue-virtual-scroll-list 渲染 10000 个节点，当页面展示94~100区间内的数据时，我们发现浏览器实际只渲染了展示数据前后的91-110内的20条数据（取决于keeps参数）。

2. 简单使用

父组件

<template>
  <div style="height: 650px;">
    <virtual-list 
      style="height: 100%; overflow-y: auto;"
      :data-key="'id'"
      :data-sources="list"
      :data-component="itemComponent"
      :keeps="20"
      :extra-props="{
        address,
        basisInfo,
      }"
      @tobottom="listToBottom"/>
  </div>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list';
import itemComponent from './itemComponent';
export default {
  data(){
    return {
      VirtualList,
      itemComponent,
      list: [],
      address:{ province:'江苏',city:'南京' },
      basisInfo:[{age:20}] 
    }
  },
  components: {},
  methods:{
    content(){
      for(let i = 0; i < 10000; i++){
        const obj = {id: i, name: `人员${i}`};
        this.list.push(obj) 
      }
    },
    listToBottom(){
      console.log('到底了哦');
    },
  },
  mounted(){
    this.content()
  }
}
</script>

子组件

<template>
  <div>
    编号：{{ index }} <br/>
    姓名：{{ source.name }}<br/> 
    年龄：{{basisInfo[0].age}}<br/>
    地址：{{address.province}}-{{address.city}}
    <hr/>
  </div>
</template>

<script>
  export default {
    name: 'item-component',
    props: {
      // index of current item
      index: { 
        type: Number
      },
      source: { 
        type: Object,
        default () {
          return {}
        }
      },
      address:{
        type: Object,
        default () {
          return {}
        }
      },
      basisInfo:{
        type: Array,
        default () {
          return []
        }  
      }
    },
    mounted(){}
  }
</script>

3. 参数详解

必选参数

可选参数
常用

不常用

4. 公共方法

可以通过 ref 调用这些方法：

5. 注意

该组件使用就地补丁策略来呈现列表而不是 v-for 和 :key。
这种方式实现了最佳效率，但仅适用于列表输出不依赖于节点组件内部状态或临时 DOM 状态（如：表单输入值）的情况。
但是遇到这样的情况怎么办？
在不维护内部状态的情况下，推荐使用 props 和 dispatch（无状态组件），这里是一个 keep-state 的例子。