vue实现虚拟列表
虚拟列表的实现原理
虚拟列表的核心思想是只渲染可视区域内的列表项，而非全部数据。通过动态计算可视区域的起始和结束索引，减少DOM节点数量，提升性能。适用于大数据量场景，如长列表、表格等。
基本实现步骤
安装vue-virtual-scroller库
npm install vue-virtual-scroller引入并使用组件
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
export default {
components: {
RecycleScroller
}
}模板中使用
<RecycleScroller
class="scroller"
:items="items"
:item-size="50"
key-field="id"
v-slot="{ item }"
>
<div class="item">
{{ item.name }}
</div>
</RecycleScroller>自定义实现方案
计算可视区域范围
computed: {
visibleItems() {
const start = Math.floor(this.scrollTop / this.itemSize)
const end = start + Math.ceil(this.containerHeight / this.itemSize)
return this.items.slice(start, end)
}
}设置容器样式
.container {
height: 500px;
overflow-y: auto;
position: relative;
}处理滚动事件
methods: {
handleScroll(e) {
this.scrollTop = e.target.scrollTop
}
}性能优化技巧
设置合适的itemSize值，过大或过小都会影响性能。对于动态高度项目，使用estimateSize属性提供预估高度。
使用Object.freeze冻结数据数组，避免Vue对大数据量的响应式处理开销。
对于复杂项目内容，使用v-once指令避免不必要的重渲染。
动态高度处理
实现动态高度需要额外计算每个项目实际高度并缓存。使用ResizeObserver API监测项目高度变化。
const heights = new Map()
function updateHeight(id, height) {
heights.set(id, height)
// 触发重新计算布局
}注意事项
确保每个项目有唯一key，避免复用问题。滚动条需要使用transform而非top定位，减少重排。
对于SSR场景，需要特殊处理初始渲染。移动端需要考虑滚动性能优化和惯性滚动效果。
