Q11 · React / Vue 优化

Vue 在开发过程中的性能优化策略？

Vuecomputed虚拟列表

⚡ 速记答案（30 秒）

合理使用 computed、watch，避免在模板里写大量复杂计算
使用 v-if / v-show 控制可见性，避免一次性渲染大块 DOM
列表加 key，长列表用虚拟滚动或分页
使用异步组件、路由懒加载
使用生产模式构建，开启编译优化（静态提升等）
减少不必要的深层响应式数据，必要时用 shallowReactive/markRaw

📖 详细讲解

Vue 性能优化分层

1. 响应式优化

• shallowRef / shallowReactive：减少深层监听

• markRaw：标记不需要响应式的数据

• toRaw：获取原始对象，避免响应式代理开销

2. 渲染优化

• v-once：只渲染一次的静态内容

• v-memo：条件记忆渲染

• keep-alive：缓存组件状态

• Teleport：减少不必要的 DOM 层级

3. 大列表优化

• 虚拟滚动：vue-virtual-scroller

• 分页加载：分批渲染

4. 编译优化（Vue 3）

• 静态提升

• 预字符串化

• 缓存事件处理函数

💻 代码示例

Vue 3 性能优化示例

import { shallowRef, markRaw, computed } from 'vue';

// 1. 使用 shallowRef 减少深层响应式
const bigData = shallowRef({
  items: [], // 不会深层监听 items 内部变化
});

// 2. 使用 markRaw 标记不需要响应式的数据
const chart = markRaw(new ChartLibrary());

// 3. 使用 computed 缓存计算结果
const filteredList = computed(() => {
  return items.value.filter(item => item.active);
});

// 4. 异步组件懒加载
const HeavyComponent = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
);

v-memo 条件渲染

<template>
  <!-- 只有当 item.id 或 selected 变化时才重新渲染 -->
  <div v-for="item in list" :key="item.id" v-memo="[item.id, selected === item.id]">
    <p>{{ item.name }}</p>
  </div>
</template>

💡

面试技巧：回答性能问题时，先说指标和标准，再讲优化手段，最后结合实际项目经验。