需求分析(长列表展示)
页面某处需要渲染 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
是对象,需要用这个做唯一标识
<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
插件展示大量数据,是可以比较流畅的渲染 / 滚动的