如何在Vue3中实现虚拟列表，使用虚拟滚动技术展示大数据集合，提高性能

JJCTO袁龙

于 2024-08-22 16:14:19 发布

阅读量1.1k

点赞数 24

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yuanlong12178/article/details/141431044

版权

Vue 专栏收录该内容

450 篇文章 5 订阅

订阅专栏

如何在Vue3中实现虚拟列表，使用虚拟滚动技术展示大数据集合，提高性能

在现代前端开发，数据驱动的应用越来越依赖于高性能的用户界面。当需要展示大量数据时，比如成千上万的列表项，直接在DOM中渲染所有这些项无疑会导致性能瓶颈，影响用户体验。为了解决这个问题，虚拟列表（或虚拟滚动）是一种有效的解决方案。本文将以Vue3为例，介绍如何实现虚拟列表并提高性能。

什么是虚拟列表？

虚拟列表是一种技术，它只渲染可视范围内的列表项，而不是整个列表。当用户滚动时，虚拟列表动态地加载和卸载视口内的元素，以降低DOM节点的数量，提升渲染性能。这在数据量庞大的情况下尤其有效。

项目准备

你需要确保你的开发环境中安装了Vue3。如果你还没有创建项目，可以使用Vue CLI快速创建一个新项目：

npm install -g @vue/cli
vue create virtual-list-demo
cd virtual-list-demo
npm run serve

实现虚拟列表

我们将创建一个简单的虚拟列表组件，该组件使用Vue3的Composition API。下面是实现的步骤：

1. 创建组件

创建一个新文件 VirtualList.vue，并在其中编写以下代码：

<template>
  <div class="virtual-list" ref="listContainer" @scroll="onScroll">
    <div
      class="virtual-list-item"
      v-for="(item, index) in visibleItems"
      :key="item.id"
      :style="{ height: itemHeight + 'px' }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
  itemHeight: {
    type: Number,
    default: 30,
  },
});

const listContainer = ref(null);
const startIndex = ref(0);
const visibleCount = ref(0);

// 计算可见项目的数量
const calculateVisibleCount = () => {
  const container = listContainer.value;
  if (container) {
    const containerHeight = container.clientHeight;
    visibleCount.value = Math.ceil(containerHeight / props.itemHeight) + 1;
  }
};

// 计算可见项目的索引范围
const visibleItems = computed(() => {
  const endIndex = startIndex.value + visibleCount.value;
  return props.items.slice(startIndex.value, endIndex);
});

// 滚动处理函数
const onScroll = () => {
  const container = listContainer.value;
  if (container) {
    const scrollTop = container.scrollTop;
    startIndex.value = Math.floor(scrollTop / props.itemHeight);
  }
};

// 组件挂载时计算可见项目数
onMounted(() => {
  calculateVisibleCount();
  window.addEventListener('resize', calculateVisibleCount);
});

// 清理资源
onUnmounted(() => {
  window.removeEventListener('resize', calculateVisibleCount);
});
</script>

<style scoped>
.virtual-list {
  overflow-y: auto;
  height: 400px; /* 设定固定高度 */
  border: 1px solid #ddd;
}

.virtual-list-item {
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
  line-height: 30px; /* 与 itemHeight 相同 */
  padding: 0 10px;
}
</style>

2. 使用组件

在 App.vue 中使用 VirtualList 组件，将一组数据传递给它。示例数据可以使用 Array.from 来生成。

<template>
  <div id="app">
    <h1>虚拟列表示例</h1>
    <VirtualList :items="items" :itemHeight="30" />
  </div>
</template>

<script setup>
import VirtualList from './components/VirtualList.vue';

const items = Array.from({ length: 10000 }, (v, k) => ({
  id: k,
  name: `Item ${k + 1}`,
}));
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>