Vue 大量数据展示卡顿解决方案（长列表优化）

需求分析（长列表展示）

页面某处需要渲染1w+ 条数据，并需要滚动展示，这时如果直接把这些数据渲染到页面上，会导致系统内存大量被占用，导致页面卡顿或崩溃

我们都知道，每次 DOM 修改，浏览器都会重新计算元素布局，再重新渲染（回流 / 重绘）。如果数据量很大，页面计算时间就会加成，造成页面卡顿

解决方案

• 根源：DOM 元素太多
• 思路：限制元素数量 / 虚拟DOM

后台数据格式：

[{
        checked:0，
        data:"xxx"，
        label:"xxx"，}]

Vue 中就有一个现成的轮子可以解决这个问题：vue-virtual-scroller

1. 安装vue-virtual-scroller 插件

npminstall --save vue-virtual-scroller

2. 在main.js 引入

// 注意：别忘了引用这个cssimport'vue-virtual-scroller/dist/vue-virtual-scroller.css'import Vuefrom"vue";import{ RecycleScroller}from'vue-virtual-scroller'

Vue.component('RecycleScroller', RecycleScroller)

3. 在组件里使用
   • items：呈现数据
   • item-size：呈现数据的大小 / 高度
   • key-filed：如果items 是对象，需要用这个做唯一标识

<RecycleScrollerstyle="height: 200px;overflow: auto"class="scroller":items="listItem":item-size="20"key-field="data"><templatev-slot="{ item }"><el-checkbox:key="item.data":label="item.label"/></template></RecycleScroller><script>exportdefault{data(){return{
            listItem:[]}}}</script>

总结

使用vue-virtual-scroller 插件展示大量数据，是可以比较流畅的渲染 / 滚动的