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 插件，可大幅增强类型提示、补全和校验能力。