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

素颜马尾好姑娘i 2023-01-20 15:53 814阅读 0赞

## 需求分析（长列表展示） ##

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

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

## 解决方案 ##

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

![1a76931e94ace944e1f1ed115a9a0354.gif][]

后台数据格式：

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

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

1.  安装 `vue-virtual-scroller` 插件

npm install --save vue-virtual-scroller

1.  在 `main.js` 引入

// 注意：别忘了引用这个css
    import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
    import Vue from "vue";
    import {  RecycleScroller } from 'vue-virtual-scroller'
    
    Vue.component('RecycleScroller', RecycleScroller)

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

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

## 总结 ##

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

[1a76931e94ace944e1f1ed115a9a0354.gif]: /images/20221021/4437a9b12cba480689b8ca8b5887fe5e.png
[vue-virtual-scroller]: https://github.com/Akryum/vue-virtual-scroller#recyclescroller