Vue 性能优化指南：虚拟列表、懒加载、渲染优化与 Core Web Vitals

Sat, 01 Aug 2026 15:00:00 +0800

Vue 3 默认性能已大幅优于 Vue 2，但生产级应用仍需针对具体场景进行调优。本文覆盖从大数据渲染到 Bundle 优化的完整性能策略。

一、大数据列表：虚拟滚动

1.1 vue-virtual-scroller

<template>
 <RecycleScroller
 class="scroller"
 :items="items"
 :item-size="50"
 key-field="id"
 v-slot="{ item }"
 >
 <div class="item">{{ item.name }}</div>
 </RecycleScroller>
</template>

<script setup>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

const items = ref(Array.from({ length: 10000 }, (_, i) => ({
 id: i,
 name: `Item ${i}`,
})))
</script>

原理：只渲染可视区域 + 缓冲区的 DOM 节点（通常 20-30 个），滚动时动态复用。

Lazy-Loading on PlumePHP

Vue 性能优化指南：虚拟列表、懒加载、渲染优化与 Core Web Vitals

一、大数据列表：虚拟滚动

1.1 vue-virtual-scroller