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

需求分析（长列表展示）

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

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

解决方案

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

后台数据格式：

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

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

安装 vue-virtual-scroller 插件

npm install --save vue-virtual-scroller

在 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)

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

<RecycleScrollerstyle="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 插件展示大量数据，是可以比较流畅的渲染 / 滚动的

---------------------
作者：雪急飞绪
来源：CSDN
原文：https://blog.csdn.net/qq_38689395/article/details/116757771
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件