当前位置：首页 > news >正文

【前端】vue3性能优化方案

news 来源：原创 2025/6/7 14:53:40

以下是Vue 3性能优化的系统性方案，结合核心优化策略与实用技巧，覆盖渲染、响应式、加载、代码等多个维度：

精准控制渲染范围
- v-if vs v-show：
  - v-if：条件为假时销毁DOM，适合低频切换场景（如权限控制）
  - v-show：仅切换CSS显示，适合高频切换（如标签页）
- v-once：静态内容使用此指令，避免重复渲染
- v-memo：缓存组件片段，依赖项不变时跳过渲染（适用于大型列表）
```
<div v-for="item in list" :key="item.id" v-memo="[item.id]">{{ item.name }}</div>
```
高效列表渲染
- 唯一key：为v-for列表项提供稳定key，避免全量Diff
- 虚拟滚动：使用vue-virtual-scroller等库，仅渲染可视区域元素
```
<VirtualScroller :items="largeList" item-height="50"/>
```

减少响应式开销
- shallowRef/shallowReactive：仅对顶层属性做响应式，避免深层嵌套对象的性能损耗
```
import { shallowReactive } from 'vue';
const state = shallowReactive({ user: { name: 'Tom' } }); // 仅user属性响应
```
- 冻结非响应数据：使用Object.freeze()避免不需要响应的数据被代理
计算属性缓存
- 用computed替代methods：依赖不变时复用缓存值，避免重复计算
- 拆分复杂计算：避免单计算属性包含过多逻辑，减少重算范围

代码分割与懒加载

路由级懒加载：通过动态import()分割路由组件

const router = createRouter({routes: [{ path: '/user', component: () => import('./User.vue') }]
});

组件级懒加载：使用defineAsyncComponent异步加载组件

const AsyncComp = defineAsyncComponent(() => import('./HeavyComponent.vue'));

状态缓存
- <keep-alive>：缓存非活跃组件实例，避免重复渲染（如标签页切换）
```
<keep-alive><component :is="currentComponent"></component>
</keep-alive>
```

Tree Shaking支持
- 按需导入API：避免全量引入Vue，利用ES Module特性
```
import { ref, computed } from 'vue'; // 只引入所需API
```
静态提升（Compiler Optimizations）
- Vue 3编译器自动将静态节点提升到渲染函数外，减少Diff对比
第三方库优化
- 使用支持Tree Shaking的库（如Lodash-es替代Lodash）
- 按需引入组件库（如Element Plus的auto-import插件）