当前位置：首页 > news >正文

vue大数据量列表渲染性能优化：虚拟滚动原理

news 2025/7/12 16:33:21

前面咱完成了自定义JuanTree组件各种功能的实现。在数据量很大的情况下，我们讲了两种实现方式来提高渲染性能：前端分页和节点数据懒加载。

前端分页小节：Vue3扁平化Tree组件的前端分页实现

节点数据懒加载小节：Element Tree Plus版功能演示：数据懒加载

关于扁平化结构Tree和嵌套结构Tree组件的渲染

嵌套结构的Tree组件是一种递归渲染，性能上比起列表结构的v-for渲染比较一般。对于这种渲染方式，在数据量很大的情况下，只有通过懒加载可以提高渲染性能；而扁平化结构则有更多的选择，前端分页是一种方式，还有一种更好的选择，就是本节介绍的虚拟滚动。

在这里插入图片描述

下一小节，我们将对自定义JuanTree组件来应用虚拟滚动，解决数据量非常大的情况下的用户体验良好的高性能渲染。本小节讲原理和基本demo的实现，喜欢的点个赞，关注下，后续会更精彩！

功能演示

在这里插入图片描述

虚拟滚动的原理

在这里插入图片描述

demo实现

编写vitepress示例

在这里插入图片描述

滚动条的实现

考虑到原生滚动条太丑，我们使用element-plus提供的el-scrollbar组件，因为它简单好用且展示也很美观。

element plus在基于vite的vue3 tsx项目的整合请参考：vite tsx项目的element plus集成 - 按需引入踩坑

demo示例源码

src/components/VirtualList.vue

实现非常简单易懂！

<script setup lang="ts">
import { computed, ref } from 'vue'const containerHeight = 24 * 12 // 容器高度
const itemHeight = 24 // 列表项高度
const visibleCount = Math.ceil(containerHeight / itemHeight) // 可视区域列表元素数量
const totalCount = 1000 // 列表元素总数
const data = ref(Array.from({ length: totalCount }).map((_, index) => ({ value: index })))
// 起始索引
const startIndex = ref(0)
// 可视区域的数据
const visibleData = computed(() => data.value.slice(startIndex.value, startIndex.value + visibleCount))
// 数据列表在Y轴的偏移量
const offsetY = ref(0)
const onScroll = (event: any) => {const scrollTop = event.scrollTop// 按照滚动的高度触发可视区域数据计算属性的重新计算。startIndex.value = Math.floor(scrollTop / itemHeight)// 同步更新数据列表元素translate3d样式y轴的偏移量，确保其始终与视口的最上端对齐offsetY.value = scrollTop
}
</script><template><el-scrollbar class="vl-container" :height="containerHeight" @scroll="onScroll"><div class="vl-wrapper"><!--  展示滚动条  --><divclass="vl-blank":style="{height: `${totalCount * itemHeight}px`}"></div><!--  数据列表 --><divclass="vl-data":style="{transform: `translate3d(0, ${offsetY}px, 0)`}"><div class="item" v-for="(item, index) in visibleData" :key="index">Item {{ item.value }}</div></div></div></el-scrollbar>
</template><style scoped lang="scss">
.vl-wrapper {position: relative;.vl-blank {position: absolute;top: 0;right: 0;left: 0;}
}
</style>