Vue中大型列表性能优化：虚拟滚动实现指南

<template>
    <div ref="list" class="infinite-list-container" @scroll="scrollEvent($event)">
        <!-- 占位元素，用于撑开滚动容器的高度，模拟完整列表的滚动条 -->
        <div
                class="infinite-list-phantom"
                :style="{ height: listHeight + 'px' }"
        ></div>
        <!-- 实际渲染的可见列表项容器 -->
        <div class="infinite-list" :style="{ transform: getTransform }">
            <!-- 使用 slot 渲染可见数据，允许父组件自定义列表项的样式和内容 -->
            <slot v-for="data in visibleData" :data="data"/>
        </div>
    </div>
</template>

<script>
export default {
    name: "VirtualList",
    props: {
        // 待渲染的完整数据数组
        listData: {
            type: Array,
            default: () => [],
            require: true,
        },
        // 每个列表项的固定高度 (重要假设，后续会讨论变高情况)
        itemHeight: {
            type: Number,
            default: 20,
            require: true,
        },
    },
    computed: {
        // 列表的总高度，用于占位元素
        listHeight() {
            return this.listData.length * this.itemHeight;
        },
        // 可视区域内可显示的列表项数量
        visibleCount() {
            return Math.ceil(this.screenHeight / this.itemHeight);
        },
        // 列表项的垂直偏移量，用于CSS transform
        getTransform() {
            return `translate3d(0,${this.startOffset}px,0)`;
        },
        // 实际渲染到DOM中的数据子集
        visibleData() {
            return this.listData.slice(
                    this.start,
                    Math.min(this.end, this.listData.length) // 确保end不超过数据总长度
            );
        },
    },
    mounted() {
        // 组件挂载后，获取容器的实际可视高度
        this.screenHeight = this.$el.clientHeight;
        // 初始化起始和结束索引
        this.start = 0;
        this.end = this.start + this.visibleCount;
    },
    data() {
        return {
            // 可视区域高度
            screenHeight: 0,
            // 列表项的垂直偏移量（像素）
            startOffset: 0,
            // 可视区域内第一个列表项的索引
            start: 0,
            // 可视区域内最后一个列表项的索引
            end: null,
        };
    },
    methods: {
        // 滚动事件处理函数
        scrollEvent() {
            // 获取当前滚动条的 scrollTop 值
            let scrollTop = this.$refs.list.scrollTop;
            // 根据 scrollTop 和 itemHeight 计算新的起始索引
            this.start = Math.floor(scrollTop / this.itemHeight);
            // 计算新的结束索引
            this.end = this.start + this.visibleCount;
            // 计算列表项的垂直偏移量，确保可见列表项在正确的位置
            this.startOffset = scrollTop - (scrollTop % this.itemHeight);
        },
    },
};
</script>

<style scoped>
.infinite-list-container {
    height: 100%; /* 容器高度，根据实际需求调整 */
    overflow: auto; /* 允许滚动 */
    position: relative; /* 为内部绝对定位元素提供定位上下文 */
    -webkit-overflow-scrolling: touch; /* 提升iOS设备上的滚动流畅度 */
}

.infinite-list-phantom {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1; /* 确保它在实际内容下方 */
}

.infinite-list {
    left: 0;
    right: 0;
    top: 0;
    position: absolute; /* 绝对定位，通过 transform 移动 */
    text-align: center; /* 示例样式，可根据实际需求调整 */
}
</style>

<template>
    <div class="app-container">
        <!-- 供应商列表列 -->
        <div class="column supplier-column">
            <h3>供应商</h3>
            <VirtualList :listData="suppliersList" :itemHeight="40">
                <template v-slot="{ data }">
                    <!-- 自定义供应商列表项的渲染 -->
                    <div class="list-item supplier-item">{{ data.name }} - {{ data.id }}</div>
                </template>
            </VirtualList>
        </div>

        <!-- 客户列表列 -->
        <div class="column client-column">
            <h3>客户</h3>
            <VirtualList :listData="clientsList" :itemHeight="40">
                <template v-slot="{ data }">
                    <!-- 自定义客户列表项的渲染 -->
                    <div class="list-item client-item">{{ data.name }} ({{ data.type }})</div>
                </template>
            </VirtualList>
        </div>
    </div>
</template>

<script>
import VirtualList from './VirtualList.vue'; // 假设VirtualList组件在同级目录

export default {
    components: {
        VirtualList
    },
    data() {
        return {
            suppliersList: [], // 存储供应商数据，可能初始为空，后续加载
            clientsList: [],   // 存储客户数据，可能初始为空，后续加载
        };
    },
    created() {
        // 模拟数据加载
        this.loadInitialData();
    },
    methods: {
        loadInitialData() {
            // 假设从数据库或API加载数据
            // 供应商数据 (2000条)
            for (let i = 0; i < 2000; i++) {
                this.suppliersList.push({ id: `S${i}`, name: `供应商 ${i}` });
            }
            // 客户数据 (58000条)
            for (let i = 0; i < 58000; i++) {
                this.clientsList.push({ id: `C${i}`, name: `客户 ${i}`, type: i % 2 === 0 ? '大客户' : '普通客户' });
            }
        }
    }
};
</script>

<style scoped>
.app-container {
    display: flex;
    height: 100vh; /* 整个应用容器高度 */
}

.column {
    flex: 1; /* 两列平分宽度 */
    padding: 10px;
    border: 1px solid #eee;
    margin: 5px;
    display: flex;
    flex-direction: column;
}

.column h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

/* VirtualList 容器的父级需要有明确的高度 */
.column > .infinite-list-container {
    height: calc(100% - 30px); /* 减去标题高度等 */
}

.list-item {
    height: 40px; /* 必须与 itemHeight prop 保持一致 */
    line-height: 40px;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
}

.list-item:nth-child(even) {
    background-color: #f9f9f9;
}
</style>