🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
今天来分享 10 个 Vue3 的性能优化技巧。
核心原则：
减少不必要的响应式追踪
避免无谓的 DOM 操作
按需加载资源
咱也不要为了优化而优化！小项目用默认写法完全没问题，优化应在性能瓶颈出现后进行。
这些技巧不难，但都非常关键。 看完你会发现：原来 Vue3 还能这么写。
1. 使用 shallowReactive 替代 reactive
问题：
reactive 会让对象里每一层都变得“敏感”——哪怕你只改了最里面的某个小字段，Vue 也会花力气去追踪它。数据一大，性能就变慢。
解决方案：
对不需要深层响应的数据，使用 shallowReactive，只让最外层变成响应式的。
示例：
import { shallowReactive } from 'vue';const data = shallowReactive({list: [],meta: { total: 0 }
});
适用场景：
当你从后端拿到一大坨只读数据（比如表格列表、API 响应），且不会修改嵌套属性时。
2. 用 toRefs 解构响应式对象
问题：
如果你直接从 reactive 对象里解构变量（如 const { name } = state），这个 name 就变成普通变量了，修改它不会触发页面更新。
解决方案：
使用 toRefs 解构，保持每个属性的响应性。
示例：
const state = reactive({ name: 'Vue', age: 3 });
const { name, age } = toRefs(state); // name 和 age 依然是响应式的！
好处：
在模板中可以直接写 {{ name }}，不用写 {{ state.name }}，代码更清爽。
3. 优先使用 watchEffect 而非 watch
区别：
watch：你要手动指定监听谁（比如watch(count, ...)）。watchEffect：你只写逻辑，Vue 自动分析里面用了哪些响应式变量，并监听它们。
示例：
watchEffect(() => {// Vue 自动发现 count.value 被用了 → 只要 count 变，这段就执行localStorage.setItem('count', count.value);
});
适合场景：
保存用户输入到本地缓存、根据筛选条件自动请求数据、同步状态到 URL 等。
4. 利用 <Suspense> 优雅处理异步组件
问题：
动态加载组件（如通过 import()）时，页面可能白屏几秒，用户体验差。
解决方案：
用 <Suspense> 包裹异步组件，显示 loading 提示。
示例：
<Suspense><template #default><UserProfile /> <!-- 必须是异步组件 --></template><template #fallback><div>加载中，请稍候…</div></template> </Suspense>
注意：
仅适用于异步组件（即用 defineAsyncComponent 或 () => import(...) 定义的组件）。
5. 使用 <Teleport> 解决模态框层级问题
问题：
弹窗写在组件内部，可能被父级的 overflow: hidden 或 z-index 限制，导致显示不全或盖不住其他内容。
解决方案：
用 <Teleport> 把组件“传送”到 <body> 底部，脱离当前 DOM 树。
示例：
<Teleport to="body"><Modal v-if="show" /> </Teleport>
类比：
就像你在客厅写了个气球，但它实际飘到了天空——不受房间天花板限制。
常用目标：to="body" 是最常见用法。
6. 自定义指令封装高频操作（如复制）
问题：
复制文本、防抖点击、自动聚焦……这些功能到处都要用，每次都写一堆代码很麻烦。
解决方案：
写一个自定义指令，一次定义，处处使用。
示例：
app.directive('copy', {mounted(el, binding) {el.addEventListener('click', () => {navigator.clipboard.writeText(binding.value);});}
});
使用：
<button v-copy="'要复制的内容'">点我复制</button>
好处：逻辑集中、复用性强、模板干净。
7. 用 Pinia 插件扩展 store 能力
问题：
每个 store 都想加个“重置”功能？手动一个个写太重复。
解决方案：
通过 Pinia 插件，一次性给所有 store 添加 $reset() 方法。
正确实现：
pinia.use(({ store }) => {// 保存初始状态快照（深拷贝）const initialState = JSON.parse(JSON.stringify(store.$state));store.$reset = () => {store.$state = initialState;};
});
使用：
const userStore = useUserStore(); userStore.$reset(); // 恢复初始状态
适用场景：表单重置、清除缓存、统一日志等。
注意：不能直接用
store.$patch(store.$state)，因为$state是当前状态，不是初始状态！
8. v-memo 优化大型列表渲染
问题：
列表有上千项，哪怕只改了一行的状态，Vue 默认会重新比对整张表，浪费性能。
解决方案：
用 v-memo 告诉 Vue：“只有这些值变了，才需要重新渲染这一行”。
示例：
<li v-for="item in list" :key="item.id" v-memo="[item.id, item.status]">{{ item.name }} —— 状态：{{ item.status }}
</li>
注意事项：
- 适合内容稳定、更新频率低的大列表。
- 不要和
<transition-group>一起用（会失效）。 - 高频变动的列表慎用，可能适得其反。
v-memo是 Vue 3.2+ 的功能。
9. 虚拟滚动（Virtual Scrolling）
问题：
渲染 10,000 条消息？浏览器直接卡死！
解决方案：
只渲染“当前可见区域”的内容，滑动时动态替换，内存和性能都省下来。
推荐库（Vue 3 兼容）：
vueuc（轻量、活跃维护）vue-virtual-scroll-grid
安装 & 示例（以 vueuc 为例）：
npm install vueuc
<script setup>
import { VirtualList } from 'vueuc';
</script><template><VirtualList :items="messages" :item-height="60" :bench="10"><template #default="{ item }"><MessageItem :msg="item" /></template></VirtualList>
</template>
类比：
就像微信聊天记录——你往上滑，旧消息才加载；不滑的时候，几千条其实没真画出来。
10. 路由与组件懒加载 + 图片优化
组件懒加载
原理：不是一打开网页就加载所有页面，而是“用到哪个才加载哪个”。
写法：
{ path: '/about', component: () => import('./views/About.vue') }
好处：首屏加载更快，节省流量和内存。
图片优化
- 用 WebP 格式：比 JPG/PNG 小 30%~50%，清晰度不变（现代浏览器都支持）。
- 图片懒加载：屏幕外的图先不加载，滑到附近再加载。
- 关键图预加载：首页 Banner 图提前加载，避免白块。
简单懒加载（原生支持）：
<img src="image.jpg" loading="lazy" alt="示例图" />
兼容性提示：
loading="lazy"在 Chrome/Firefox/Edge 支持良好，但 Safari 15.4 以下和 IE 不支持。若需兼容旧环境，建议搭配IntersectionObserver或第三方库（如lazysizes）。
总结
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
