vue虚拟列表优化前端性能

文章目录

前言
1. 创建Vue组件
- 2. 使用虚拟列表组件
总结

前言

在Vue.js中实现虚拟列表（Virtual List）是为了优化长列表的渲染性能。虚拟列表的核心思想是仅渲染当前视口（viewport）中可见的部分列表项，而不是一次性渲染整个列表。这样可以显著减少DOM节点的数量，提高页面的渲染速度和滚动性能。(只是作为参考，也可以不按照我的方式来写)

1. 创建Vue组件

首先，创建一个Vue组件，用于封装虚拟列表的逻辑。

<template>
  <div
    ref="scrollContainer"
    class="scroll-container"
    @scroll="handleScroll"
    style="height: 100%; overflow-y: auto;"
  >
    <div
      class="list-content"
      :style="{ height: totalHeight + 'px', transform: `translateY(${scrollTop}px)` }"
    >
      <div
        v-for="item in visibleItems"
        :key="item.id"
        class="list-item"
        :style="{ height: itemHeight + 'px' }"
      >
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VirtualList',
  props: {
    items: {
      type: Array,
      required: true,
    },
    itemHeight: {
      type: Number,
      required: true,
    },
    visibleCount: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      scrollTop: 0,
    };
  },
  computed: {
    totalHeight() {
      return this.items.length * this.itemHeight;
    },
    startIndex() {
      return Math.floor(this.scrollTop / this.itemHeight);
    },
    endIndex() {
      return this.startIndex + this.visibleCount;
    },
    visibleItems() {
      return this.items.slice(this.startIndex, this.endIndex).map((item, index) => ({
        ...item,
        id: `${this.startIndex}-${index}`, // 为每个项生成唯一的key
      }));
    },
  },
  methods: {
    handleScroll() {
      this.scrollTop = this.$refs.scrollContainer.scrollTop;
    },
  },
};
</script>

<style scoped>
.scroll-container {
  position: relative;
  width: 100%;
}
.list-content {
  position: absolute;
  width: 100%;
}
.list-item {
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  padding: 10px;
}
</style>

2. 使用虚拟列表组件

<template>
  <div>
    <virtual-list :items="items" :itemHeight="50" :visibleCount="10" />
  </div>
</template>

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

export default {
  components: {
    VirtualList,
  },
  data() {
    return {
      items: Array.from({ length: 1000 }, (_, i) => ({
        id: i,
        text: `Item ${i + 1}`,
      })),
    };
  },
};
</script>