面对海量数据渲染，即使是强大的 Vue 也难免会遇到性能瓶颈，卡顿、掉帧等问题接踵而至。今天，我们就来聊聊如何利用虚拟列表这一“黑科技”，解决 Vue 中万级数据列表的勾选卡顿问题，让你的列表性能飞起来！
海量数据渲染之痛：卡顿、崩溃、用户体验差
当数据量达到上万条甚至更多时，传统的列表渲染方式会将所有数据一次性加载并渲染到页面上，这会带来一系列问题：
- 浏览器卡顿： 大量的 DOM 节点操作，会占用大量的 CPU 资源，导致浏览器卡顿甚至崩溃。
- 页面加载缓慢： 首次渲染时间过长，用户需要等待很长时间才能看到列表内容。
- 操作卡顿： 列表滚动、勾选等操作，都会变得非常卡顿，严重影响用户体验。
虚拟列表：以一敌万的性能优化利器
虚拟列表的核心思想是：只渲染可视区域内的数据，非可视区域的数据不进行渲染，从而大大减少 DOM 节点数量，提高渲染效率。
Vue 中如何实现虚拟列表？
1. 核心思路
- 计算可视区域的高度和每个列表项的高度。
- 根据可视区域的高度和滚动位置，计算出需要渲染的列表项的起始索引和结束索引。
- 只渲染起始索引和结束索引之间的列表项，并通过 CSS 技巧，将这些列表项定位到正确的位置。
- 监听列表滚动事件，动态更新渲染的列表项。
2. 示例代码
<template>
<div class="virtual-list" @scroll="handleScroll">
<div class="list-viewport" :style="{ height: `${viewportHeight}px` }">
<div class="list-container" :style="{ transform: `translateY(${startIndex * itemHeight}px)` }">
<div v-for="(item, index) in visibleData" :key="index" class="list-item" :style="{ height: `${itemHeight}px` }">
<input type="checkbox" v-model="item.checked">
{{ item.label }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [], // 所有数据
visibleData: [], // 可视区域数据
viewportHeight: 0, // 可视区域高度
itemHeight: 50, // 每个列表项高度
startIndex: 0, // 起始索引
endIndex: 0, // 结束索引
};
},
mounted() {
this.viewportHeight = this.$el.clientHeight;
this.generateData(10000); // 生成 10000 条数据
},
methods: {
// 生成模拟数据
generateData(count) {
for (let i = 0; i < count; i++) {
this.dataList.push({
label: `Item ${i}`,
checked: false,
});
}
this.updateVisibleData();
},
// 更新可视区域数据
updateVisibleData() {
this.startIndex = Math.floor(this.$el.scrollTop / this.itemHeight);
this.endIndex = Math.min(this.startIndex + Math.ceil(this.viewportHeight / this.itemHeight) + 1, this.dataList.length);
this.visibleData = this.dataList.slice(this.startIndex, this.endIndex);
},
// 处理滚动事件
handleScroll() {
this.updateVisibleData();
},
},
};
</script>
3. 源码解析
- handleScroll 方法监听列表滚动事件，并在每次滚动时调用 updateVisibleData 方法。
- updateVisibleData 方法计算可视区域数据的起始索引和结束索引，并更新 visibleData 数组。
- v-for 指令只渲染 visibleData 数组中的数据，从而减少 DOM 节点数量。
- :style 属性动态设置列表容器的 transform 属性，将可视区域数据定位到正确的位置。
总结
虚拟列表是解决海量数据渲染性能问题的利器，使用虚拟列表可以显著提高列表的渲染效率和用户体验。在 Vue 项目中，我们可以借助虚拟列表组件或自行实现虚拟列表逻辑，优化列表性能，打造丝滑流畅的用户体验！