Vue3 实现列表虚拟滚动，纵享流畅操作体验

2023-10-21 12:24:10

前言

在构建现代 Web 应用程序时，经常会遇到处理大型列表的情况，例如在线音乐播放器中的歌曲列表、电子商务网站中的商品列表等。当列表项数量较多时，直接渲染所有列表项可能会导致性能问题，特别是当用户滚动列表时，浏览器需要花费大量时间来渲染整个列表，从而导致页面卡顿和延迟。

1. 虚拟滚动简介

虚拟滚动是一种优化大型列表性能的技术，它通过只渲染当前可见的列表项来减少浏览器的渲染负担。当用户滚动列表时，虚拟滚动会动态地加载和卸载列表项，从而确保只有当前可见的列表项被渲染。这种技术可以显著提高列表的滚动性能，即使在处理数千甚至数万个列表项时也能保持流畅的滚动体验。

2. Vue3 中的虚拟滚动

在 Vue3 中，可以使用内置指令 v-for 和一些巧妙的技巧来实现列表虚拟滚动。以下是实现步骤：

在模板中使用 v-for 指令来遍历数据源：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

为每个列表项添加一个唯一的键值 :key，这有助于 Vue3 跟踪列表项的变化并优化渲染过程。
使用 CSS 样式来设置列表的容器高度和滚动条样式，以确保列表能够滚动：
```
#list-container {
  height: 500px;
  overflow-y: scroll;
}
```
使用 window.addEventListener() 监听列表容器的滚动事件，并在滚动时触发自定义事件：
```
window.addEventListener('scroll', () => {
  document.dispatchEvent(new Event('list-scroll'));
});
```
在 Vue3 组件中使用 onMounted() 生命周期钩子来监听自定义事件，并在事件触发时更新列表的可见范围：
```
onMounted() {
  document.addEventListener('list-scroll', this.updateVisibleRange);
},
```

在 updateVisibleRange() 方法中，计算当前可见的列表项范围并更新 v-for 指令的 v-if 条件，以只渲染当前可见的列表项：

updateVisibleRange() {
  const scrollTop = this.$refs.listContainer.scrollTop;
  const listHeight = this.$refs.listContainer.clientHeight;
  const itemHeight = this.itemHeight;
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.ceil((scrollTop + listHeight) / itemHeight);
  this.visibleRange = [startIndex, endIndex];
},

3. 实用技巧和最佳实践

在实现 Vue3 中的列表虚拟滚动时，有一些实用技巧和最佳实践可以帮助您创建高性能且易于使用的滚动列表：

合理设置列表项高度： 为列表项设置合理的高度可以提高虚拟滚动的性能。如果列表项高度不固定，则需要在计算当前可见列表项范围时考虑列表项高度的动态变化。
使用 window.requestAnimationFrame()： 在更新列表的可见范围时，可以使用 window.requestAnimationFrame() 来优化性能。这可以确保在浏览器空闲时才更新列表，从而避免与其他任务争用资源。
使用Intersection Observer API： Intersection Observer API 可以帮助您更准确地检测列表项是否在当前可见范围内。这对于优化虚拟滚动的性能非常有用。
避免在列表项中使用复杂的动画： 在列表项中使用复杂的动画可能会影响虚拟滚动的性能。尽量避免使用复杂动画，或将动画限制在列表项的局部区域。
使用骨架屏或加载指示器： 在列表数据加载完成之前，可以使用骨架屏或加载指示器来占位，以防止页面出现空白。这可以提高用户的体验并减少等待时间。

4. 总结

虚拟滚动是一种优化大型列表性能的技术，它可以在保证流畅滚动体验的同时减少浏览器的渲染负担。在 Vue3 中，可以使用内置指令 v-for 和一些巧妙的技巧来实现列表虚拟滚动。通过合理设置列表项高度、使用 window.requestAnimationFrame()、使用 Intersection Observer API 以及避免在列表项中使用复杂的动画等技巧，可以进一步优化虚拟滚动的性能，创建高性能且易于使用的滚动列表。