10个Vue3性能优化的实用技巧分享
今天来分享 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）。
总结
| 技巧 | 解决什么问题 | 关键词 |
|---|---|---|
| shallowReactive | 大对象响应式开销大 | 浅响应 |
| toRefs | 解构丢失响应性 | 保持链接 |
| watchEffect | 手动监听麻烦 | 自动追踪 |
| <Suspense> | 异步组件白屏 | 加载提示 |
| <Teleport> | 弹窗被遮挡 | 脱离 DOM |
| 自定义指令 | 重复逻辑多 | 一键复用 |
| Pinia 插件 | store 功能重复 | 全局增强 |
| v-memo | 大列表重渲染 | 按需更新 |
| 虚拟滚动 | 上万条卡顿 | 只渲染可见 |
| 懒加载 + 图片优化 | 首屏慢、流量大 | 按需加载 |
先写出清晰可维护的代码，再根据实际性能问题选择合适的优化手段！
到此这篇关于10个Vue3性能优化的实用技巧分享的文章就介绍到这了,更多相关Vue3性能优化技巧内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在V8中，JavaScript的内存空间分为栈（Stack）和堆（Heap）两部分，垃圾回收的基本思路是：查找内存中的所有变量，看哪些已经不再需要，然后释放这些变量所占用的内存，本文就给大家梳理一下V8垃圾回收系统,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了vue3.0翻牌数字组件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
在Vue3的项目开发中,组件化是一个核心特性,它可以让我们将页面拆分成多个小的、可复用的组件,从而提高代码的可维护性和可复用性,本文将详细介绍Vue3中四种常见的组件注册方式,希望能帮助你更好地掌握Vue3的组件注册技巧,需要的朋友可以参考下2025-07-07
这篇文章主要介绍了vue优化之优雅的抛出错误(Error)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文主要介绍了springboot+vue使用流式响应的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2026-02-02
这篇文章主要介绍了详解vue-cli项目中的proxyTable跨域问题小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue使用CSS插件scss时代码报红问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了vue项目中使用scss的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
本文主要介绍了VantUI封装自定义Tabbar路由跳转的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了加快Vue项目的开发速度的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
最新评论