Vue如何加载十万条数据

加载十万条数据到 Vue 应用中是一个相对复杂的问题，主要因为渲染大量数据可能会导致性能瓶颈，尤其是在前端性能较低的设备上。为了确保加载大量数据时，页面不会卡顿或崩溃，我们通常采取一些优化手段，以下是几种常用的方案：

1. 分页加载 (Pagination)

分页加载是一种常见的做法。通过将数据分批次加载，每次加载一小部分数据，而不是一次性加载所有数据。这可以显著减轻页面渲染的压力。

<template><div><ul><li v-for="item in pageData" :key="item.id">{{ item.name }}</li></ul><button @click="loadMore">加载更多</button></div>
</template><script>
export default {data() {return {allData: [], // 所有数据pageData: [], // 当前页的数据currentPage: 1,pageSize: 1000, // 每页数据数量};},methods: {loadData() {// 假设这里是从后台API获取数据的逻辑// 模拟获取十万条数据let data = [];for (let i = 0; i < 100000; i++) {data.push({ id: i, name: `Item ${i}` });}this.allData = data;this.loadPageData();},loadPageData() {// 根据当前页数从 allData 中提取数据const start = (this.currentPage - 1) * this.pageSize;const end = start + this.pageSize;this.pageData = this.allData.slice(start, end);},loadMore() {this.currentPage++;this.loadPageData();},},mounted() {this.loadData();},
};
</script>

这种方式每次只渲染一小部分数据，减少了渲染的压力，同时也避免了一次性加载过多数据导致页面崩溃或性能下降的问题。

2. 虚拟滚动 (Virtual Scrolling)

虚拟滚动（又叫“懒加载”）是一种通过仅渲染当前视口内的数据来优化性能的方式。这样，当用户滚动时，只渲染他们当前可以看到的部分数据，而不是渲染所有数据。

有很多现成的库支持虚拟滚动，最常用的是 Vue Virtual Scroller。

使用 `vue-virtual-scroller`：

安装 vue-virtual-scroller：

npm install vue-virtual-scroller

在你的 Vue 组件中使用：

<template><div style="height: 500px; overflow-y: auto;"><VirtualList:items="allData":item-size="50"  <!-- 每项高度 -->:height="500"  <!-- 容器高度 -->><template #default="{ item }"><div :key="item.id" class="item">{{ item.name }}</div></template></VirtualList></div>
</template><script>
import { VirtualList } from 'vue-virtual-scroller';export default {components: {VirtualList,},data() {return {allData: [], // 数据};},mounted() {// 模拟获取十万条数据let data = [];for (let i = 0; i < 100000; i++) {data.push({ id: i, name: `Item ${i}` });}this.allData = data;},
};
</script><style>
.item {padding: 10px;border-bottom: 1px solid #ddd;
}
</style>

虚拟滚动只渲染当前视口中的数据项，当用户滚动时，其他数据项才会被加载，这样可以大幅减少 DOM 元素的数量，提高性能。

3. 懒加载与后端分页

除了前端的优化外，你还可以考虑将数据分页的处理放到服务器端，这样每次只从服务器加载必要的数据。服务器端分页可以通过在请求中传递页码和每页条数来实现。后端分页可以有效减少传输的数据量。

// Vue 方法示例
methods: {async fetchPageData(page, pageSize) {const response = await fetch(`/api/data?page=${page}&pageSize=${pageSize}`);const data = await response.json();return data;},
},