Vue性能优化详解

1. 响应式优化

1.1 shallowRef

// 大型对象不需要深层响应式
const bigData = shallowRef(loadHugeDataset());
// 只有 .value 赋值才触发更新
bigData.value = newData; // 触发
bigData.value.items.push(x); // 不触发

1.2 shallowReactive

const state = shallowReactive({
  items: [], // 不是响应式的
  count: 0, // 是响应式的（根级属性）
});

1.3 markRaw

const staticData = markRaw(largeObject);
// 永远不会转为响应式

1.4 Object.freeze

const frozenList = Object.freeze(hugeArray);
const items = ref(frozenList); // 跳过深层响应式转换

2. 渲染优化

2.1 v-memo

<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
  <!-- 仅 item.selected 变化时重新渲染 -->
  <ExpensiveComponent :data="item" />
</div>

2.2 v-once

<h1 v-once>{{ title }}</h1>
<!-- 只渲染一次，后续更新跳过 -->

2.3 虚拟滚动

<template v-for="item in visibleItems" :key="item.id">
  <div :style="{ transform: `translateY(${offset}px)` }">{{ item.content }}</div>
</template>

推荐库：vue-virtual-scroller、vue3-virtual-scroll-list

3. 组件优化

3.1 异步组件

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

3.2 KeepAlive

<KeepAlive :include="['UserList', 'Settings']">
  <RouterView />
</KeepAlive>

4. 编译优化

Vue 3 编译器自动优化：

• 静态提升（Static Hoisting）
• 补丁标记（Patch Flags）
• 块级树（Block Tree）
• 静态属性提升