vue实现长列表加载
实现长列表加载的核心方法
虚拟滚动技术
通过仅渲染可视区域内的列表项大幅减少DOM节点数量。Vue生态中可使用vue-virtual-scroller或vue-virtual-scroll-list库：
<template>
<RecycleScroller
class="scroller"
:items="listData"
:item-size="50"
key-field="id"
v-slot="{ item }"
>
<div class="item">{{ item.content }}</div>
</RecycleScroller>
</template>
<script>
import { RecycleScroller } from 'vue-virtual-scroller'
export default {
components: { RecycleScroller },
data() {
return { listData: [...] } // 长列表数据
}
}
</script>滚动事件监听加载
监听滚动位置动态加载数据，适合分页接口场景：
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll() {
const scrollBottom = document.documentElement.scrollHeight -
window.innerHeight - window.scrollY
if (scrollBottom < 300 && !this.loading) {
this.loadMoreData()
}
},
async loadMoreData() {
this.loading = true
const newData = await fetchNextPage()
this.listData.push(...newData)
this.loading = false
}
}性能优化要点
减少响应式依赖
对静态列表项使用Object.freeze冻结数据避免不必要的响应式追踪：
this.listData = Object.freeze(rawData.map(item => ({ ...item })))键值优化
为列表项设置唯一且稳定的key，避免使用数组索引：
<div v-for="item in list" :key="item.uniqueId">
{{ item.text }}
</div>分片渲染策略
将大数据分割成小块通过requestAnimationFrame分批渲染：
function chunkRender(data) {
let index = 0
const chunkSize = 50
function doChunk() {
const chunk = data.slice(index, index + chunkSize)
// 渲染逻辑
if (index < data.length) {
requestAnimationFrame(doChunk)
}
index += chunkSize
}
doChunk()
}特殊场景处理
动态高度列表
当项目高度不固定时，需使用能自动测量高度的虚拟滚动库，如vue-virtual-scroller的DynamicScroller组件。
保持滚动位置
在数据更新时通过scrollTop保存位置：
const container = document.querySelector('.list-container')
const scrollTop = container.scrollTop
// 更新数据后
nextTick(() => {
container.scrollTop = scrollTop
})移动端优化
添加passive: true提高滚动事件性能：
window.addEventListener('scroll', this.handleScroll, { passive: true })以上方法可根据具体场景组合使用，虚拟滚动适用于超长列表，滚动加载适合分页数据，性能优化手段可进一步提升用户体验。
