vue虚拟列表优化前端性能

文章目录

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

前言

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

1. 创建Vue组件

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

<template><divref="scrollContainer"class="scroll-container"@scroll="handleScroll"style="height: 100%; overflow-y: auto;"><divclass="list-content":style="{ height: totalHeight + 'px', transform: `translateY(${scrollTop}px)` }"><divv-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>