Skip to content

Vue3 基础性能优化技巧（2025 年最新实践）.md

Latest commit

 

History

History
141 lines (98 loc) · 3.48 KB

Vue3 基础性能优化技巧（2025 年最新实践）.md

File metadata and controls

141 lines (98 loc) · 3.48 KB

Vue3 基础性能优化技巧（2025 年最新实践）

一、‌ 响应式数据优化 ‌

1. 合理选择 ref 和 reactive‌

  • 简单数据（如字符串、数字）用 ref，复杂对象用 reactive，避免滥用 reactive 导致不必要的深层追踪。
  • 示例：
// 推荐
const count = ref(0);
const user = reactive({ name: "Alice", age: 30 });

// 避免
const user = ref({ name: "Alice", age: 30 }); // 需要 .value 访问

2. 冻结静态数据

用 Object.freeze() 或 markRaw 标记不会变化的数据（如配置表、常量），跳过响应式处理。 示例：

const staticConfig = markRaw({ apiUrl: "https://api.example.com" });

二、‌ 模板与渲染优化 ‌

区分 v-if 和 v-show‌

v-if 适合低频切换的组件（如弹窗），彻底销毁 DOM；v-show 适合高频切换（如 Tab 页），通过 CSS 隐藏。
示例：

<!-- 低频切换用 v-if -->
<Modal v-if="showModal" />

<!-- 高频切换用 v-show -->
<div v-show="activeTab === 'home'">Home Content</div>

列表渲染必加 key‌

为 v-for 列表项添加唯一 key，帮助 Vue 高效复用 DOM 节点，避免全量更新。 示例：

<ul>
  <li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>

使用 v-once 缓存静态内容 ‌

标记永不变化的静态内容（如页脚、Logo），跳过后续更新。 示例：

<footer v-once>© 2024 Company Name</footer>

三、‌ 计算属性与侦听器 ‌

善用 computed 缓存计算结果 ‌

将复杂逻辑封装到 computed 中，自动缓存依赖项未变化时的结果。 示例：

const fullName = computed(() => `${firstName.value} ${lastName.value}`);

避免在 watch 中执行高开销操作 ‌

使用 watch 的 immediate: true 或 flush: 'post' 控制触发时机，减少不必要的执行。 示例：

watch(
  () => user.value.age,
  (newAge) => {
    /_ 逻辑 _/;
  },
  { immediate: true } // 首次加载立即执行
);

四、‌ 资源加载优化 ‌

图片懒加载 ‌

使用 v-lazy 指令（如 vue-lazyload 插件）或 loading="lazy" 属性延迟加载视口外图片。 示例：

<img v-lazy="imageUrl" alt="Lazy Image">

<!-- 或 -->
<img :src="imageUrl" loading="lazy">

按需引入第三方库 ‌

使用 Vite 的 Tree Shaking 特性，仅导入需要的功能模块。 示例（Element Plus）：

import { ElButton } from "element-plus"; // 仅引入按钮组件

五、‌ 构建配置优化 ‌

  • 代码分割（Code Splitting）‌

使用动态导入（import()）分割路由组件，减少首屏加载体积。 示例：

const Home = defineAsyncComponent(() => import("./views/Home.vue"));
  • 启用 Gzip/Brotli 压缩 ‌

通过 Vite 插件（如 vite-plugin-compression）生成压缩资源，减少网络传输体积。 配置示例（vite.config.js）：

import viteCompression from "vite-plugin-compression";
export default {
  plugins: [viteCompression({ algorithm: "brotliCompress" })],
};
  • 优化优先级建议
  • 必做项 ‌： 列表项加 key → 按需引入第三方库 → 图片懒加载 → 启用压缩。
  • 进阶项 ‌： 计算属性缓存 → 代码分割 → 冻结静态数据。

注：以上技巧适用于大多数 Vue3 项目，优化后首屏加载速度可提升 30%+。结合 Chrome DevTools 的 ‌Lighthouse‌ 和 ‌Performance‌ 面板验证效果。