vue3中高阶使用与性能优化

在 Vue 3 中，setup() 是 Composition API 的核心入口，它提供了更灵活、可复用和模块化的代码组织方式。

---

一、setup() 高阶使用技巧

1. 使用 defineProps 和 defineEmits（无需导入）

Vue 3.3+ 支持自动推导 props 和 emits，无需手动引入函数。

<script setup>
const props = defineProps(['title', 'content']);
const emit = defineEmits(['update:title', 'submit']);function handleSubmit() {emit('submit', { data: props.content });
}
</script>

2. 结合 TypeScript 类型推导

提升类型安全性，支持自动补全和类型检查。

interface User {id: number;name: string;age?: number;
}const props = defineProps<{user: User;isActive: boolean;
}>();

3. 自定义逻辑封装为组合函数（Composable）

将可复用逻辑提取到独立函数中，便于跨组件复用。

// useUserValidation.ts
import { ref } from 'vue';export function useUserValidation(user) {const isValid = ref(false);function validate() {isValid.value = !!user.name && user.age > 0;}return { isValid, validate };
}

在组件中使用：

<script setup>
import { useUserValidation } from '@/composables/useUserValidation';const props = defineProps(['user']);
const { isValid, validate } = useUserValidation(props.user);
</script>

4. 使用 ref 和 reactive 控制响应性粒度

• 使用 ref 管理基础类型。
• 使用 reactive 管理对象/数组。
• 对不需要响应式的数据使用 markRaw() 或普通变量。

import { markRaw } from 'vue';const largeData = markRaw(JSON.parse(localStorage.getItem('bigData')));

---

二、性能优化策略

1. 避免不必要的响应式数据

• 对静态或大数据量对象使用 markRaw()，防止 Vue 自动将其转换为响应式对象。

const config = markRaw({ theme: 'dark', version: '1.0.0' });

2. 控制副作用生命周期

• 使用 onBeforeUnmount 清理副作用（如定时器、事件监听器）。
• 使用 effectScope 管理多个响应式依赖的生命周期。

import { effectScope, onBeforeUnmount } from 'vue';const scope = effectScope();scope.run(() => {const count = ref(0);watchEffect(() => {console.log(count.value);});onBeforeUnmount(() => {scope.stop(); // 手动清理所有副作用});
});

3. 避免重复计算与渲染

• 使用 computed 缓存计算结果。
• 使用 v-once 或 <keep-alive> 缓存静态内容。
• 使用 key 控制组件重新渲染时机。

<template><div :key="user.id"><!-- 当 user.id 变化时才会重新渲染 -->{{ computedName }}</div>
</template>

4. 减少模板中的复杂逻辑

• 模板中应尽量只调用简单变量或 computed，避免直接写复杂表达式。
• 将复杂逻辑封装到 methods 或 Composable 函数中。

---

三、开发与维护建议

1. 结构清晰、职责单一

• 每个组件只做一件事。
• 抽离通用逻辑到 composables/ 目录下。

2. 良好的命名规范

• 组合函数命名以 useXxx 开头（如 useAuth, useFetch）。
• 文件名使用大写驼峰命名法（如 UserProfile.vue）。

3. 使用 Suspense 处理异步加载状态

• 结合异步组件实现优雅加载体验。

<template><Suspense><AsyncComponent /><template #fallback>加载中...</template></Suspense>
</template>

4. 使用 Devtools 调试

• 利用 Vue Devtools 查看组件树、响应式依赖、性能面板等信息。
• 使用 console.warn() 或 error 提醒潜在问题。

---

四、完整示例：高性能封装组件

<template><div class="data-table"><table><thead><tr v-for="header in headers" :key="header.key"><th>{{ header.label }}</th></tr></thead><tbody><tr v-for="row in rows" :key="row.id"><td v-for="col in headers" :key="col.key">{{ row[col.key] }}</td></tr></tbody></table></div>
</template><script setup>
import { ref, computed, onMounted } from 'vue';
import { fetchData } from '@/api/data';const props = defineProps({headers: {type: Array,required: true}
});const data = ref([]);
const loading = ref(false);async function loadData() {loading.value = true;try {const result = await fetchData();data.value = result;} finally {loading.value = false;}
}onMounted(loadData);const rows = computed(() => {return data.value.map(item => ({...item,fullName: `${item.firstName} ${item.lastName}`}));
});
</script>