以下是 Vue3 性能优化实战的综合方案，结合高频场景与最佳实践：
一、代码优化策略
1. 条件渲染优化
- 频繁切换显示状态的元素优先使用 v-show，避免 v-if 导致的频繁 DOM 重建与销毁：
<div v-show="isVisible">内容</div> <!-- 适合高频切换 -->
<div v-if="isLoaded">内容</div> <!-- 适合低频切换 -->
- 静态内容使用 v-once 缓存首次渲染结果，避免重复计算：
<h1 v-once>{{ staticTitle }}</h1>
2. 响应式数据优化
- 使用 shallowRef 或 shallowReactive 避免深层嵌套对象的全量响应式处理：
const largeObj = shallowReactive({ ... });
- 对非响应式数据使用 markRaw 跳过 Proxy 代理。
二、组件优化技巧
1. 组件懒加载
- 非首屏组件使用 defineAsyncComponent 动态导入：
const AsyncComp = defineAsyncComponent((
