深入理解 Vue 中大列表虚拟滚动 (Virtual Scrolling) 的实现原理，以及如何通过 `v-for` 和动态高度优化性能。

各位观众老爷，大家好！今天咱们来聊聊Vue中大列表的优化神器——虚拟滚动(Virtual Scrolling)。保证让你的列表飞起来！

一、啥是虚拟滚动？（别被“虚拟”俩字吓着！）

想象一下，你有一个包含10万条数据的列表。如果直接用v-for一股脑全渲染出来，浏览器肯定要卡成PPT。为啥？因为浏览器要为所有元素创建DOM节点，计算布局，绘制到屏幕上。就算用户只看屏幕上的十几条数据，浏览器也要把剩下的99980多条也渲染出来，这不是纯纯的浪费吗？

虚拟滚动就是来解决这个问题的。它的核心思想是：只渲染可视区域内的DOM元素，当滚动发生时，动态地更新这些DOM元素的内容。 简单来说，就是只渲染你“看得到”的东西，看不到的先放着，等到需要的时候再渲染。

二、虚拟滚动的基本原理：障眼法大师

虚拟滚动的实现离不开以下几个关键要素：

可视区域（Viewport）： 屏幕上能看到的区域，这是我们渲染的依据。
缓冲区域（Buffer）： 可视区域上下预留的一小部分区域，用于提前渲染，避免快速滚动时出现空白。
总高度（Total Height）： 整个列表的总高度，用于撑开滚动条，让滚动条看起来像有10万条数据一样。
起始索引（Start Index）： 可视区域内第一个元素的索引。
结束索引（End Index）： 可视区域内最后一个元素的索引。
偏移量（Offset）： 可视区域距离列表顶部的偏移量，用于定位当前可视区域应该显示哪些数据。

工作流程大致如下：

计算出可视区域的高度。
根据滚动条的位置计算出起始索引和结束索引。
截取数据，只渲染起始索引到结束索引之间的数据。
根据起始索引计算出偏移量，并将列表向上或向下平移，让可视区域显示正确的内容。

可以用一个表格来更清晰地展示这些要素：

要素	说明
可视区域	浏览器窗口中实际可见的区域，是滚动容器的内部部分。
缓冲区域	在可视区域上下额外渲染的区域，用于平滑滚动，避免快速滚动时出现空白。
总高度	整个列表内容理论上的高度，用于撑开滚动条，让用户可以滚动到列表的任何位置。
起始索引	可视区域中第一个渲染的列表项在原始数据数组中的索引。
结束索引	可视区域中最后一个渲染的列表项在原始数据数组中的索引。
偏移量	用于调整渲染列表项位置的 CSS `transform: translateY()` 值，模拟滚动效果，使起始索引对应的列表项出现在可视区域的顶部。

三、代码实战：Vue + v-for 实现虚拟滚动

接下来，我们用Vue和v-for来实现一个简单的虚拟滚动列表。

<template>
  <div class="list-container" @scroll="handleScroll" ref="listContainer">
    <div class="list-content" :style="{ height: totalHeight + 'px' }">
      <div
        class="list-item"
        v-for="item in visibleData"
        :key="item.id"
        :style="{ transform: `translateY(${item.offset}px)` }"
      >
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 模拟10000条数据
      visibleData: [], // 可视区域内的数据
      startIndex: 0, // 起始索引
      endIndex: 0, // 结束索引
      itemHeight: 50, // 预估每个item的高度 (重要!)
      visibleCount: 20, // 可视区域内item的数量
      totalHeight: 0, // 总高度
    };
  },
  mounted() {
    this.generateData(10000); // 生成10000条数据
    this.calculateVisibleData(); // 初始化可视区域数据
  },
  methods: {
    generateData(count) {
      for (let i = 0; i < count; i++) {
        this.listData.push({
          id: i,
          content: `Item ${i}`,
        });
      }
      this.totalHeight = this.listData.length * this.itemHeight;
    },
    handleScroll() {
      const scrollTop = this.$refs.listContainer.scrollTop;
      this.startIndex = Math.floor(scrollTop / this.itemHeight);
      this.endIndex = Math.min(
        this.startIndex + this.visibleCount,
        this.listData.length
      );
      this.calculateVisibleData();
    },
    calculateVisibleData() {
      this.visibleData = this.listData.slice(this.startIndex, this.endIndex).map(item => {
        return {
          ...item,
          offset: item.id * this.itemHeight //计算偏移量
        }
      });
    },
  },
};
</script>

<style scoped>
.list-container {
  width: 300px;
  height: 400px;
  overflow-y: auto;
  position: relative; /* 必须设置，否则 transform: translateY 不生效 */
}

.list-content {
  position: relative; /* 必须设置，否则 transform: translateY 不生效 */
}

.list-item {
  position: absolute; /* 必须设置，否则 transform: translateY 不生效 */
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
</style>

代码解读：

list-container： 设置容器的宽高，并开启垂直滚动overflow-y: auto。
list-content： 设置总高度，撑开滚动条。
list-item： 使用绝对定位position: absolute，并根据偏移量transform: translateY()来定位每个item的位置。
generateData： 生成模拟数据，并计算总高度。
handleScroll： 滚动事件处理函数，计算起始索引和结束索引，并更新可视区域数据。
calculateVisibleData： 截取数据，并为每个item计算偏移量。

重要提示：

itemHeight： itemHeight是预估的每个item的高度。如果item的高度不固定，会导致滚动条跳动。后面我们会介绍如何处理动态高度的问题。
position: absolute和transform: translateY()： 这两个属性是实现虚拟滚动的关键。position: absolute让item脱离文档流，transform: translateY()可以高效地改变item的位置，而不会触发重排。
overflow-y: auto: 容器需要设置overflow-y: auto才能触发滚动事件。

四、动态高度：让列表更灵活

上面的例子中，我们假设每个item的高度都是固定的。但实际情况往往更复杂，item的高度可能是动态的，例如包含富文本内容。如果item高度不固定，会导致滚动条跳动，体验很差。

解决动态高度问题，通常有两种方法：

预先计算高度： 在渲染列表之前，先计算出每个item的高度，并存储起来。这样就可以在滚动时准确地计算出偏移量。这种方法适用于数据量不是特别大的情况。
延迟计算高度： 只计算可视区域内item的高度，并将高度缓存起来。当滚动到新的区域时，再计算新的item的高度。这种方法适用于数据量非常大的情况，可以避免一次性计算所有item的高度。

下面我们来实现一个延迟计算高度的例子：

<template>
  <div class="list-container" @scroll="handleScroll" ref="listContainer">
    <div class="list-content" :style="{ height: totalHeight + 'px' }">
      <div
        class="list-item"
        v-for="item in visibleData"
        :key="item.id"
        :style="{ transform: `translateY(${item.offset}px)` }"
        ref="listItem"
      >
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
      visibleData: [],
      startIndex: 0,
      endIndex: 0,
      itemHeightCache: {}, // 缓存每个item的高度
      defaultItemHeight: 50, // 默认高度
      visibleCount: 20,
      totalHeight: 0,
    };
  },
  mounted() {
    this.generateData(10000);
    this.calculateVisibleData();
  },
  methods: {
    generateData(count) {
      for (let i = 0; i < count; i++) {
        this.listData.push({
          id: i,
          content: `Item ${i} - ${this.generateRandomText()}`, // 模拟动态内容
        });
      }
      this.calculateTotalHeight(); // 初始计算总高度
    },
    generateRandomText() {
      const length = Math.floor(Math.random() * 50) + 10; // 随机长度
      let text = '';
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 ';
      for (let i = 0; i < length; i++) {
        text += characters.charAt(Math.floor(Math.random() * characters.length));
      }
      return text;
    },
    handleScroll() {
      const scrollTop = this.$refs.listContainer.scrollTop;
      this.startIndex = Math.floor(scrollTop / this.getAverageHeight());
      this.endIndex = Math.min(
        this.startIndex + this.visibleCount,
        this.listData.length
      );
      this.calculateVisibleData();
    },
    calculateVisibleData() {
      // 首先确保已经获取了所有的listItem
      this.$nextTick(() => {
        const listItems = this.$refs.listItem;

        if(!listItems) return; // 如果列表为空，直接返回

        this.visibleData = this.listData.slice(this.startIndex, this.endIndex).map((item, index) => {
          const listItem = listItems[index]; // 获取对应的DOM元素
          const height = listItem ? listItem.offsetHeight : this.defaultItemHeight; // 如果DOM元素存在，获取高度，否则使用默认高度

          this.itemHeightCache[item.id] = height; // 缓存高度

          let offset = 0;
          for (let i = 0; i < item.id; i++) {
            offset += this.itemHeightCache[i] || this.defaultItemHeight;  // 累加之前所有item的高度
          }
          return {
            ...item,
            offset: offset,
            height: height // 存储item高度
          };
        });

        this.calculateTotalHeight(); // 每次更新visibleData后，重新计算总高度
      });
    },
    calculateTotalHeight() {
      let total = 0;
      for (let i = 0; i < this.listData.length; i++) {
        total += this.itemHeightCache[i] || this.defaultItemHeight;
      }
      this.totalHeight = total;
    },
    getAverageHeight() {
      let totalHeight = 0;
      let count = 0;
      for (let key in this.itemHeightCache) {
        totalHeight += this.itemHeightCache[key];
        count++;
      }
      return count > 0 ? totalHeight / count : this.defaultItemHeight;
    }
  },
};
</script>

<style scoped>
.list-container {
  width: 300px;
  height: 400px;
  overflow-y: auto;
  position: relative;
}

.list-content {
  position: relative;
}

.list-item {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}
</style>

代码解读：

itemHeightCache： 用于缓存每个item的高度，key是item的id，value是item的高度。
defaultItemHeight： 默认高度，用于在没有计算出item高度之前使用。
calculateVisibleData：
- 使用this.$nextTick确保DOM已经渲染完成。
- 获取可视区域内的所有list-item的DOM元素。
- 遍历可视区域的数据，获取每个item的高度，并缓存起来。
- 计算每个item的偏移量，偏移量等于之前所有item的高度之和。
calculateTotalHeight： 重新计算总高度，总高度等于所有item的高度之和。
getAverageHeight： 计算平均高度，用于计算起始索引。

重要提示：

this.$nextTick： this.$nextTick非常重要，它可以确保DOM已经渲染完成，才能获取到正确的item高度。
缓存： 缓存item的高度可以避免重复计算，提高性能。
默认高度： 设置默认高度可以避免在没有计算出item高度之前出现空白。
动态内容： 例子中使用了随机文本来模拟动态内容，实际项目中可以根据具体情况来生成内容。

五、性能优化：让列表更丝滑

虚拟滚动可以显著提高列表的性能，但还可以进一步优化：

减少DOM操作： 尽量减少DOM操作，例如使用transform: translateY()来改变item的位置，而不是直接修改top属性。
使用key： v-for必须使用key，可以帮助Vue更高效地更新DOM。
节流（Throttling）： 滚动事件触发频率很高，可以使用节流来限制滚动事件的处理频率。例如，每隔100ms处理一次滚动事件。
防抖（Debouncing）： 如果需要在滚动停止后执行一些操作，可以使用防抖。例如，在滚动停止后重新计算可视区域数据。
使用IntersectionObserver： 可以使用IntersectionObserver来监听元素是否进入可视区域，从而更精确地控制渲染。
避免复杂的计算： 尽量避免在滚动事件处理函数中进行复杂的计算，可以将计算任务放到Web Worker中执行。

六、总结：虚拟滚动，大列表的福音

虚拟滚动是Vue中优化大列表的利器。它可以显著提高列表的性能，让列表滚动起来更流畅。通过本文的学习，相信你已经掌握了虚拟滚动的基本原理和实现方法。

总而言之，虚拟滚动就是个障眼法，让用户感觉列表很长，实际上只渲染了一小部分。记住几个关键点：计算起始和结束索引，截取数据，计算偏移量，就OK了！

希望今天的讲座对你有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复