性能优化实战：Vue列表渲染的虚拟滚动与分页加载方案

最新推荐文章于 2025-04-20 08:30:00 发布

码上前端

最新推荐文章于 2025-04-20 08:30:00 发布

阅读量668

点赞数 26

分类专栏： vue.js 文章标签： vue.js 性能优化 javascript 前端前端框架

本文链接：https://blog.csdn.net/qq_65243376/article/details/147310090

版权

vue.js 专栏收录该内容

32 篇文章

订阅专栏

前言：家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，

求个收藏 + 关注啦～后续还有超多惊喜，别错过！

效果图

引言

在 Vue 应用开发中，列表渲染是一个常见的需求。当列表数据量较大时，直接渲染整个列表会带来性能问题，如页面加载缓慢、滚动卡顿等。为了解决这些问题，我们可以采用虚拟滚动和分页加载这两种性能优化方案。本文将详细介绍这两种方案的原理，并结合 Vue 给出具体的实现示例。

二、虚拟滚动方案

（一）原理

虚拟滚动的核心思想是只渲染当前可见区域内的列表项，而不是渲染整个列表。当用户滚动列表时，动态计算并渲染新的可见区域内的列表项，从而减少 DOM 元素的数量，提高页面的性能。

（二）实现步骤

计算可见区域：根据列表容器的高度、滚动位置和列表项的高度，计算出当前可见区域内的列表项索引范围。
渲染可见区域内的列表项：只渲染计算出的可见区域内的列表项，而不是整个列表。
监听滚动事件：当用户滚动列表时，重新计算可见区域，并更新渲染的列表项。

（三）Vue 实现示例

<template>
  <div class="virtual-list" @scroll="handleScroll">
    <div class="list-content" :style="{ height: totalHeight + 'px' }">
      <div
        v-for="(item, index) in visibleItems"
        :key="index"
        :style="{ top: (startIndex + index) * itemHeight + 'px' }"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`),
      itemHeight: 30,
      containerHeight: 400,
      startIndex: 0,
      endIndex: 0
    };
  },
  computed: {
    totalHeight() {
      return this.list.length * this.itemHeight;
    },
    visibleItems() {
      return this.list.slice(this.startIndex, this.endIndex);
    }
  },
  mounted() {
    this.updateVisibleItems();
  },
  methods: {
    updateVisibleItems() {
      const scrollTop = this.$el.scrollTop;
      this.startIndex = Math.floor(scrollTop / this.itemHeight);
      this.endIndex = Math.min(
        this.startIndex + Math.ceil(this.containerHeight / this.itemHeight),
        this.list.length
      );
    },
    handleScroll() {
      this.updateVisibleItems();
    }
  }
};
</script>

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

.list-content {
  position: relative;
}
</style>

代码解释

数据定义：
- list：模拟的列表数据，包含 1000 个列表项。
- itemHeight：每个列表项的高度。
- containerHeight：列表容器的高度。
- startIndex 和 endIndex：当前可见区域内的列表项索引范围。
计算属性：
- totalHeight：整个列表的总高度。
- visibleItems：当前可见区域内的列表项。
生命周期钩子：
- mounted：在组件挂载后，调用 updateVisibleItems 方法计算初始的可见区域。
方法：
- updateVisibleItems：根据滚动位置计算当前可见区域内的列表项索引范围。
- handleScroll：监听列表容器的滚动事件，在滚动时调用 updateVisibleItems 方法更新可见区域。

三、分页加载方案

（一）原理

分页加载的核心思想是将大量的数据分成多个页面，每次只加载当前页面的数据。当用户滚动到列表底部时，加载下一页的数据并追加到列表中，从而减少一次性加载的数据量，提高页面的加载速度。

（二）实现步骤

初始化数据：设置每页显示的列表项数量、当前页码和总页数。
加载第一页数据：在组件挂载后，加载第一页的数据并渲染。
监听滚动事件：当用户滚动到列表底部时，加载下一页的数据并追加到列表中。

（三）Vue 实现示例

<template>
  <div class="pagination-list" @scroll="handleScroll">
    <div v-for="(item, index) in visibleList" :key="index">{{ item }}</div>
    <div v-if="loading">加载中...</div>
    <div v-if="!loading && currentPage >= totalPages">没有更多数据了</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`),
      pageSize: 20,
      currentPage: 1,
      totalPages: 0,
      visibleList: [],
      loading: false
    };
  },
  mounted() {
    this.totalPages = Math.ceil(this.list.length / this.pageSize);
    this.loadPageData();
  },
  methods: {
    loadPageData() {
      this.loading = true;
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      const newData = this.list.slice(startIndex, endIndex);
      this.visibleList = this.visibleList.concat(newData);
      this.loading = false;
    },
    handleScroll() {
      const { scrollTop, scrollHeight, clientHeight } = this.$el;
      if (scrollTop + clientHeight >= scrollHeight - 10 &&!this.loading && this.currentPage < this.totalPages) {
        this.currentPage++;
        this.loadPageData();
      }
    }
  }
};
</script>

<style scoped>
.pagination-list {
  height: 400px;
  overflow-y: auto;
}
</style>

代码解释

数据定义：
- list：模拟的列表数据，包含 1000 个列表项。
- pageSize：每页显示的列表项数量。
- currentPage：当前页码。
- totalPages：总页数。
- visibleList：当前可见的列表项。
- loading：是否正在加载数据的标志。
生命周期钩子：
- mounted：在组件挂载后，计算总页数并加载第一页的数据。
方法：
- loadPageData：根据当前页码加载对应页面的数据，并追加到 visibleList 中。
- handleScroll：监听列表容器的滚动事件，当用户滚动到列表底部且没有正在加载数据时，加载下一页的数据。