Vue 3 高效开发技巧总结

一、充分利用组合式 API

组合式 API 提供了更灵活的代码组织方式，对于复杂组件而言尤为重要。

1. useXxx 的抽离方式

将可复用逻辑抽离为独立的函数文件，例如：

// useCounter.ts
import { ref } from "vue";

export function useCounter() {
  const count = ref(0);
  const inc = () => count.value++;
  return { count, inc };
}

在组件中直接使用：

const { count, inc } = useCounter();

这种方式比 mixins 更直观，也避免了命名冲突问题。

2. 尽量减少 watch，优先使用计算属性

watch 是副作用机制，不应承担所有数据变化逻辑。能使用 computed 的逻辑尽量使用 computed。

const priceWithTax = computed(() => price.value * 1.1);

计算属性天然具备缓存和依赖跟踪，比 watch 更安全可靠。

---

二、掌握响应式陷阱与优化方法

1. ref 和 reactive 的选择

• 推荐 ref 存放基本类型

• reactive 用于对象和复杂结构

• 避免对 reactive 解构，容易失去响应性

例如：

const state = reactive({
  name: "Tom",
  age: 18,
});

不要这样做：

const { name, age } = state; // 失去响应能力

可使用 toRefs：

const { name, age } = toRefs(state);

2. 使用 shallowRef / shallowReactive 优化大型数据

渲染大体量对象时可使用 shallowRef：

const bigData = shallowRef(largeObject);

避免深层追踪提升性能。

---

三、模板优化技巧

1. 使用 v-memo 缓存模板片段（Vue 3.3+）

适用于大型渲染区域、表格、复杂 DOM。

<div v-memo="[item.id]">
  {{ item.name }}
</div>

当依赖不变时跳过整个区域的渲染。

2. 使用 v-once 渲染静态内容

对于只需要渲染一次的区域：

<h1 v-once>标题</h1>

这样 Vue 会跳过重新渲染，提升性能。

---

四、script setup 的最佳实践

script setup 写法简洁，同时具备更好的类型推导能力。

1. 避免冗余的 defineProps/defineEmits 类型声明

推荐使用类型声明方式而不是复杂对象：

const props = defineProps<{
  title: string
  count?: number
}>();

不仅清晰，也让 TS 更容易做类型检查。

2. 使用 defineExpose 控制暴露内容

暴露给父组件的内容应该精确管理：

defineExpose({
  refresh,
  reset
});

避免直接暴露所有本地变量导致维护风险。

---

五、路由与状态管理技巧

1. 动态路由的懒加载

通过 import 动态引入组件可以显著减少首屏体积：

{
  path: "/user",
  component: () => import("@/views/User.vue"),
}

2. 优先使用 Pinia 替代 Vuex

Pinia 更现代、更轻量、更适合组合式 API。

例如：

export const useUserStore = defineStore("user", {
  state: () => ({
    name: "",
  }),
  actions: {
    setName(v) {
      this.name = v;
    }
  }
});

---

六、提高列表渲染性能

1. 使用 key 保持稳定性

key 应避免使用 index，尽量使用业务 id：

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

2. 大数据渲染使用虚拟列表

推荐库：

• vue-virtual-scroller

• vueuc VirtualList

能让上万条数据的渲染性能保持流畅。

---

七、工程与项目结构技巧

1. 使用 alias 简化路径

在 Vite 中：

resolve: {
  alias: {
    "@": "/src"
  }
}

然后直接：

import Login from "@/views/Login.vue";

更清晰、可维护。

2. 环境变量区分开发与生产

使用 .env、.env.development、.env.production 管理不同环境配置，提高部署效率。

例如：

VITE_API_BASE=https://api.example.com 

在代码中：

const apiBase = import.meta.env.VITE_API_BASE;

---

八、调试和开发效率提升

1. 使用 Vue DevTools 进行状态追踪

Vue DevTools 可直接观察：

• 组件树结构

• props、state

• Pinia store

• 路由变化

是最重要的调试工具之一。

2. 使用 volar 提升 TypeScript 体验

在 VS Code 中启用 Volar 插件，可大幅增强类型提示、补全和校验能力。