一、充分利用组合式 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 插件，可大幅增强类型提示、补全和校验能力。