10个Vue3性能优化的实用技巧分享

更新时间：2026年01月16日 09:42:29 作者：程序员大华

这篇文章总结了10个Vue3中最容易被忽略,但对性能提升最有效的实战技巧,适合新老开发者收藏使用,文中的示例代码讲解详细,感兴趣的小编好可以了解下

1. 使用shallowReactive替代reactive
2. 用toRefs解构响应式对象
3. 优先使用watchEffect而非watch
4. 利用<Suspense>优雅处理异步组件
5. 使用<Teleport>解决模态框层级问题
6. 自定义指令封装高频操作（如复制）
7. 用 Pinia 插件扩展 store 能力
8.v-memo优化大型列表渲染
9. 虚拟滚动（Virtual Scrolling）
10. 路由与组件懒加载 + 图片优化

组件懒加载
图片优化

总结

今天来分享 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性能优化技巧内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解vue使用Echarts画柱状图
这篇文章主要为大家介绍了vue使用Echarts画柱状图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
vue3中给数组赋值丢失响应式的解决
这篇文章主要介绍了vue3中给数组赋值丢失响应式的解决方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue 项目中常用的 2 个 Ajax 库及简单使用示例
Ajax是一种在不重新加载整个页面的情况下,通过 JavaScript 与服务器进行异步通信的技术,这篇文章主要介绍了vue项目中常用的2 个 Ajax库,需要的朋友可以参考下
2025-06-06
vue中使用axios固定url请求前缀
这篇文章主要介绍了vue中使用axios固定url请求前缀的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
Vue项目中使用WebUploader实现文件上传的方法
WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主， FLASH为辅的现代文件上传组件。这篇文章主要介绍了在Vue项目中使用WebUploader实现文件上传,需要的朋友可以参考下
2019-07-07
Vue中自定义全局组件的实现方法
这两天学习了Vue.js 感觉组件这个地方知识点挺多的，而且很重要，所以这篇文章主要给大家介绍了关于Vue中自定义全局组件的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-12-12
浅谈Vue中插槽slot的使用方法
这篇文章主要给大家分享了 Vue中插槽slot的使用方法，下面文章内容围绕插槽slot的相关资料展开其的使用方法,需要的朋友可以参考一下，希望多大家有所帮助
2021-11-11
vue3+vite+vant项目下按需引入vant报错Failed to resolve import的原因及解决
这篇文章主要给大家介绍了关于vue3+vite+vant项目下按需引入vant报错Failed to resolve import的原因及解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-01-01
关于Vue如何清除缓存的方法详解
缓存清除成为克服浏览器缓存中过时内容挑战的关键技术,术语“缓存清除”是指故意使静态资源失效或进行版本控制,迫使浏览器在发生更改时获取新资源,本文给大家介绍了Vue如何清除缓存,需要的朋友可以参考下
2023-12-12
Vue全屏模式下弹窗显示的解决过程
Vue全屏模式下弹窗显示问题源于层叠上下文与z-index冲突,解决方案需动态切换Teleport挂载点至全屏元素,强制应用最高z-index和!important样式,确保弹窗穿透全屏层并兼容多浏览器
2025-07-07