面对海量数据渲染，即使是强大的 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 项目中，我们可以借助虚拟列表组件或自行实现虚拟列表逻辑，优化列表性能，打造丝滑流畅的用户体验！

#头条创作挑战赛##程序员##深中通道今日正式通车试运营#