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

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

需求分析（长列表展示）

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

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

解决方案

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

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

后台数据格式：

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

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

安装vue-virtual-scroller 插件

npminstall --save vue-virtual-scroller

在main.js 引入

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

Vue.component('RecycleScroller', RecycleScroller)

在组件里使用
- 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>