vue虚拟滚动性能优化方式详解

// App.vue
<script>
const list = (num = 10)=> {
  const data = [];
  for (let i = 0; i < num; i  ) {
    data.push({
      id: i 1,
      name: `第 ${i 1} 条列表`
    });
  }
  return data;
}
</script>
<template>
  <VirtualScroll :data="list(100)" />
</template>
// VirtualScroll.vue
<template>
  <!-- 虚拟滚动内容 -->
  <div
    class="virtual-scroller"
    @scroll="onScroll"
    :style="{ height: containerHeight   'px' }"
  >
    <!-- 实际渲染的列表内容 -->
    <ul
      class="real-list-content"
      :style="{ transform: `translateY(${tranlateY}px)` }"
    >
      <li
        v-for="item in visibleList"
        :key="item.id"
        :style="{
          height: `${listItemHeight}px`,
          'line-height': `${listItemHeight}px`,
        }"
      >
        <div>{{ item.name }}</div>
      </li>
    </ul>
    <!-- 虚拟列表元素 -->
    <div class="virtual-height" :style="{ height: virtualHeight   'px' }">
      ~ 数据加载完毕 ~
    </div>
  </div>
</template>
<script>
export default {
  name: "vue-virtual-scroll",
};
</script>
<script setup language="ts">
import { computed, ref } from "vue";
const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  startIndex: {
    type: Number,
    default: 0,
  },
  endIndex: {
    type: Number,
    default: 10,
  },
  listItemHeight: {
    type: Number,
    default: 60,
  },
  containerHeight: {
    type: Number,
    default: 500,
  },
});
let { data, listItemHeight } = props;
const tranlateY = ref(0); // 平移距离
const startIndex = ref(props.startIndex); // 开始索引
const endIndex = ref(props.endIndex); // 结束索引
// 实际渲染的数据
const visibleList = computed(() => {
  return data.slice(startIndex.value, endIndex.value);
});
// 虚拟滚动的高度
const virtualHeight = computed(() => {
  return (data.length - visibleList.value.length) * listItemHeight   listItemHeight;
});
// 滚动事件
const onScroll = (e) => {
  const eleScrollTop = e.target.scrollTop;
  // 保证实际渲染列表一直停留在可视区
  tranlateY.value = eleScrollTop;
  // 根据实际的滚动距离，动态计算列表开始索引
  startIndex.value = Math.floor(eleScrollTop / listItemHeight);
  // 基于开始索引
  endIndex.value = startIndex.value   10;
};
</script>
<style scoped>
.virtual-scroller {
  border: solid 1px #eee;
  margin-top: 10px;
  height: 600px;
  overflow: auto;
}
.virtual-height {
  background: red;
  display: flex;
  align-items: end;
  justify-content: center;
  color: #fff;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  outline: solid 1px #fff;
  background-color: #000;
  color: #fff;
}
</style>