前端Wiki/词条/Vue 性能优化

Vue 性能优化

定义围绕响应式更新、打包体积与渲染策略的一系列优化手段，让 Vue 应用又快又轻

Vue 应用的性能优化可以从三层入手：渲染层利用虚拟 DOM 的静态提升与补丁标记，把不变的部分静态化，配合 v-once、v-memo 减少对比；数据层避免把大对象一股脑塞进深层 reactive，列表渲染始终带稳定的 key，不然 diff 无法复用节点，滚动与拖拽会明显卡顿。

工程层同样关键：路由与重组件懒加载缩小首屏体积，图片懒加载、虚拟列表处理万级数据，构建时开启代码压缩与分包、把基础库外链 CDN。优化前先用 DevTools 的性能面板与打包分析找到真实瓶颈，避免在无关紧要的地方过度优化。

v-for 必须带稳定唯一的 key，diff 才能复用 DOM
大列表上虚拟滚动，v-memo 跳过不必要的子树更新
路由懒加载加打包分包，是首屏提速最直接的手段

JavaScript

import { defineAsyncComponent } from 'vue';

// 路由/重组件懒加载
const Heavy = defineAsyncComponent(() => import('./Heavy.vue'));

// 列表渲染带稳定 key，配合虚拟滚动处理大数据
// <div v-for="item in list" :key="item.id">{{ item.name }}</div>

// 打包分析（Vite）：vite build --mode production 时配合
// rollup-plugin-visualizer 查看每个 chunk 的体积

⚠ 常见误区

v-for 用 index 当 key，数据顺序变化时渲染错乱
所有数据都做成深层响应式，初始化开销巨大
不做测量就盲目优化，搞得维护成本上升却没快多少

🔗 相关词条打包部署与优化列表渲染 v-for 与 key