Vue for循环导致Content download时间过长

如题，工作中的一个优化，后端一次性给完所有数据，没有进行分页，几千个DOM在前端同时加载导致Content download时间太长，渲染太慢，这个问题我特么都要吐了。这样下去用户体验也不好，于是选择了在前端进行分页来解决这个问题。

实现思路

1、页面上所有dom节点默认先加上 v-if，初始页码为 count = 1

2、v-if 的条件是当前节点的索引 index 小于 count * 每页数量，即满足该条件才渲染

3、滚动至底部时，count++，加载更多数据，这里我用的 ElementUI – InfiniteScroll 无限滚动 组件

核心代码

<template>
	<div v-infinite-scroll="loadData" style="overflow-y: auto;">
		<ul>
			<li v-for="(item, index) in list" :key="index" v-if="index < Number(count * 20)">{{index}}</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			count: 1
		},
		methods：{
			loadData(){
				this.count++;
			}
		}
	}
</script>

2020.11.20 更新

发现导致 Content download 时间太长的原因：后台直接返回的实体对象，返回了很多不需要的字段，直接处理了一下后台接口，只返回必要的字段给前端，问题完美解决！
类似的问题在Element UI Tree 组件中也出现过，解决方法同上！