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