别再死记硬背了！用这5个真实项目案例，带你吃透Vue 3的Composition API

用5个真实项目案例彻底掌握Vue 3的Composition API还在为Vue 3的Composition API感到困惑吗与其死记硬背各种API的用法不如通过实际项目来学习。本文将带你用5个真实场景下的项目案例从零开始掌握Composition API的核心用法和设计思想。1. 用户表单管理从Options到Composition的蜕变表单处理是前端开发中最常见的需求之一。让我们从一个典型的用户注册表单开始看看如何用Composition API重构传统的Options API代码。1.1 传统Options API的实现在Vue 2中我们可能会这样写一个表单组件export default { data() { return { form: { username: , password: , confirmPassword: }, errors: {} } }, methods: { validateUsername() { // 用户名验证逻辑 }, validatePassword() { // 密码验证逻辑 }, submitForm() { // 表单提交逻辑 } }, watch: { form.username: validateUsername, form.password: validatePassword } }这种写法有几个明显的问题相关逻辑分散在不同的选项中复用困难随着组件复杂度增加代码变得难以维护1.2 Composition API重构现在让我们用Composition API重写这个表单组件import { reactive, watch } from vue export function useFormValidation() { const form reactive({ username: , password: , confirmPassword: }) const errors reactive({}) function validateUsername() { if (!form.username) { errors.username 用户名不能为空 } else if (form.username.length 3) { errors.username 用户名至少需要3个字符 } else { delete errors.username } } function validatePassword() { // 密码验证逻辑 } watch(() form.username, validateUsername) watch(() form.password, validatePassword) function submitForm() { validateUsername() validatePassword() if (Object.keys(errors).length 0) { // 提交表单 } } return { form, errors, submitForm } }在组件中使用import { useFormValidation } from ./useFormValidation export default { setup() { const { form, errors, submitForm } useFormValidation() return { form, errors, submitForm } } }关键改进点相关逻辑集中在一个函数中验证逻辑可以轻松复用代码组织更加清晰2. 数据可视化图表响应式数据的艺术数据可视化是现代Web应用的重要组成部分。让我们看看如何用Composition API构建一个响应式的图表组件。2.1 构建可复用的图表逻辑import { ref, computed, onMounted, onUnmounted } from vue import * as echarts from echarts export function useChart(containerRef, options) { const chartInstance ref(null) const isLoading ref(false) const chartOptions computed(() ({ ...options, // 可以根据需要添加默认配置 })) function initChart() { if (!containerRef.value) return chartInstance.value echarts.init(containerRef.value) updateChart() } function updateChart() { if (!chartInstance.value) return isLoading.value true chartInstance.value.setOption(chartOptions.value) isLoading.value false } function resizeChart() { if (chartInstance.value) { chartInstance.value.resize() } } onMounted(() { initChart() window.addEventListener(resize, resizeChart) }) onUnmounted(() { if (chartInstance.value) { chartInstance.value.dispose() } window.removeEventListener(resize, resizeChart) }) return { isLoading, updateChart, resizeChart } }2.2 在组件中使用template div refchartContainer stylewidth: 100%; height: 400px;/div button clickrefreshData刷新数据/button /template script import { ref } from vue import { useChart } from ./useChart export default { setup() { const chartContainer ref(null) const chartData ref({ // 初始数据 }) const { isLoading, updateChart } useChart(chartContainer, { // 图表配置 series: [{ data: chartData.value }] }) function refreshData() { // 获取新数据 fetchData().then(data { chartData.value data updateChart() }) } return { chartContainer, refreshData, isLoading } } } /script优势体现图表逻辑与组件解耦响应式数据自动更新图表生命周期管理更加清晰3. 拖拽列表组合API的威力拖拽排序是提升用户体验的常见功能。让我们看看如何用Composition API实现一个高性能的拖拽列表。3.1 创建拖拽逻辑Hookimport { ref, onMounted, onUnmounted } from vue export function useDragAndDrop(listRef, items) { const draggedItem ref(null) const dragOverItem ref(null) function handleDragStart(index) { draggedItem.value index } function handleDragOver(index, event) { event.preventDefault() dragOverItem.value index } function handleDrop() { if (draggedItem.value ! null dragOverItem.value ! null) { const itemToMove items.value[draggedItem.value] items.value.splice(draggedItem.value, 1) items.value.splice(dragOverItem.value, 0, itemToMove) } draggedItem.value null dragOverItem.value null } function addDragEvents() { const listItems listRef.value.querySelectorAll(.draggable-item) listItems.forEach((item, index) { item.setAttribute(draggable, true) item.addEventListener(dragstart, () handleDragStart(index)) item.addEventListener(dragover, (e) handleDragOver(index, e)) item.addEventListener(drop, handleDrop) }) } onMounted(() { addDragEvents() }) onUnmounted(() { const listItems listRef.value?.querySelectorAll(.draggable-item) listItems?.forEach(item { item.removeEventListener(dragstart, handleDragStart) item.removeEventListener(dragover, handleDragOver) item.removeEventListener(drop, handleDrop) }) }) return { draggedItem, dragOverItem } }3.2 在组件中集成template ul reflistRef li v-for(item, index) in items :keyitem.id classdraggable-item :class{ dragging: draggedItem index, drag-over: dragOverItem index } {{ item.name }} /li /ul /template script import { ref } from vue import { useDragAndDrop } from ./useDragAndDrop export default { setup() { const listRef ref(null) const items ref([ { id: 1, name: 项目1 }, { id: 2, name: 项目2 }, // 更多项目... ]) const { draggedItem, dragOverItem } useDragAndDrop(listRef, items) return { listRef, items, draggedItem, dragOverItem } } } /script关键收获拖拽逻辑完全封装可以轻松应用到任何列表性能优化更简单4. 权限按钮组件逻辑复用的典范在企业级应用中权限控制是必不可少的。让我们构建一个灵活的权限按钮组件。4.1 创建权限控制Hookimport { ref, computed } from vue export function usePermission(currentUser) { const permissions ref([]) async function fetchPermissions() { // 从API获取用户权限 const response await fetch(/api/permissions) permissions.value await response.json() } const hasPermission computed(() { return (requiredPermission) { return permissions.value.includes(requiredPermission) } }) return { fetchPermissions, hasPermission } }4.2 构建权限按钮组件template button v-ifhasPermission(requiredPermission) v-bind$attrs click$emit(click, $event) slot/slot /button /template script import { defineProps, defineEmits } from vue import { usePermission } from ./usePermission export default { props: { requiredPermission: { type: String, required: true } }, emits: [click], setup(props) { const { hasPermission } usePermission() return { hasPermission } } } /script4.3 使用示例template PermissionButton required-permissioncreate_user clickcreateUser 创建用户 /PermissionButton /template设计亮点权限逻辑集中管理按钮组件简洁专注类型安全(TypeScript友好)5. 全局状态共享小型应用的状态管理对于不需要Vuex或Pinia的小型应用我们可以用Composition API实现简单的全局状态共享。5.1 创建全局状态Hookimport { reactive, readonly } from vue const globalState reactive({ user: null, settings: {}, notifications: [] }) export function useGlobalState() { function setUser(user) { globalState.user user } function addNotification(message, type info) { globalState.notifications.push({ id: Date.now(), message, type }) } function removeNotification(id) { const index globalState.notifications.findIndex(n n.id id) if (index ! -1) { globalState.notifications.splice(index, 1) } } return { state: readonly(globalState), setUser, addNotification, removeNotification } }5.2 在组件中使用template div v-ifstate.user 欢迎, {{ state.user.name }} button clicklogout退出/button /div div v-else button clicklogin登录/button /div div classnotifications div v-fornotification in state.notifications :keynotification.id :classnotification-${notification.type} {{ notification.message }} button clickremoveNotification(notification.id)×/button /div /div /template script import { useGlobalState } from ./useGlobalState export default { setup() { const { state, setUser, addNotification, removeNotification } useGlobalState() function login() { // 登录逻辑 setUser({ name: 用户1 }) addNotification(登录成功, success) } function logout() { setUser(null) addNotification(您已退出, info) } return { state, login, logout, removeNotification } } } /script实现优势不需要额外状态管理库响应式更新自动处理状态变更可控适合中小型应用6. 组合式API的最佳实践通过以上5个案例我们已经看到了Composition API的强大之处。下面总结一些最佳实践6.1 逻辑组织原则单一职责每个组合式函数应该只关注一个特定功能命名清晰使用有意义的函数和变量名参数明确明确函数需要哪些参数返回值合理只返回组件真正需要的值和方法6.2 性能优化技巧使用computed处理派生状态使用watchEffect自动追踪依赖对于大型列表考虑使用shallowRef或shallowReactive及时清理副作用如事件监听器、定时器6.3 测试策略组合式函数的一个巨大优势是易于测试。例如测试我们的表单验证Hookimport { useFormValidation } from ./useFormValidation import { reactive } from vue describe(useFormValidation, () { it(应该验证用户名, () { const { form, errors } useFormValidation() form.username expect(errors.username).toBe(用户名不能为空) form.username ab expect(errors.username).toBe(用户名至少需要3个字符) form.username abc expect(errors.username).toBeUndefined() }) })6.4 渐进式采用策略如果你正在迁移一个Vue 2项目可以采用渐进式策略从小型、独立的组件开始先尝试重构工具函数为组合式函数逐步替换mixins最后处理复杂业务逻辑7. 常见问题与解决方案在实际开发中你可能会遇到以下问题7.1 响应式丢失问题问题解构响应式对象时失去响应性const state reactive({ count: 0 }) const { count } state // 失去响应性解决方案const state reactive({ count: 0 }) const count toRef(state, count) // 保持响应性7.2 生命周期困惑问题Options API生命周期钩子与Composition API的对应关系Options APIComposition APIbeforeCreate不需要 (setup替代)created不需要 (setup替代)beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmounted7.3 TypeScript集成Composition API与TypeScript配合得天衣无缝。例如interface User { id: number name: string email: string } export function useUser() { const user refUser | null(null) function setUser(newUser: User) { user.value newUser } return { user, setUser } }7.4 代码组织建议对于大型项目建议这样组织组合式函数src/ composables/ useForm.ts useChart.ts useDragAndDrop.ts usePermission.ts useGlobalState.ts components/ FormComponent.vue ChartComponent.vue // 其他组件...8. 进阶技巧与模式掌握了基础用法后让我们看看一些进阶技巧。8.1 依赖注入模式// provider组件 import { provide } from vue export default { setup() { const theme reactive({ primaryColor: #42b983, secondaryColor: #35495e }) provide(theme, theme) return { theme } } } // consumer组件 import { inject } from vue export default { setup() { const theme inject(theme) return { theme } } }8.2 异步状态管理import { ref } from vue export function useAsync(fn) { const data ref(null) const error ref(null) const loading ref(false) async function execute(...args) { loading.value true error.value null try { data.value await fn(...args) } catch (err) { error.value err } finally { loading.value false } } return { data, error, loading, execute } }使用示例const { data, loading, execute } useAsync(fetchUsers) onMounted(() { execute() })8.3 渲染函数与JSXComposition API与渲染函数配合良好import { h, ref } from vue export default { setup() { const count ref(0) return () h(div, [ h(button, { onClick: () count.value }, 增加), h(span, 当前计数: ${count.value}) ]) } }或者使用JSXimport { ref } from vue export default { setup() { const count ref(0) return () ( div button onClick{() count.value}增加/button span当前计数: {count.value}/span /div ) } }9. 与其他技术栈的集成Composition API可以很好地与其他技术栈配合使用。9.1 与Vue Router集成import { useRoute, useRouter } from vue-router export default { setup() { const route useRoute() const router useRouter() function navigateTo(path) { router.push(path) } return { currentPath: computed(() route.path), navigateTo } } }9.2 与Vuex/Pinia集成import { computed } from vue import { useStore } from vuex export default { setup() { const store useStore() const count computed(() store.state.count) function increment() { store.commit(increment) } return { count, increment } } }9.3 与第三方库集成以axios为例import { ref } from vue import axios from axios export function useApi() { const data ref(null) const error ref(null) const loading ref(false) async function fetch(url) { loading.value true try { const response await axios.get(url) data.value response.data } catch (err) { error.value err } finally { loading.value false } } return { data, error, loading, fetch } }10. 从Options API迁移的实用建议如果你有Vue 2项目以下迁移建议可能对你有帮助逐步迁移不必一次性重写整个应用从简单组件开始先迁移展示组件再处理复杂业务组件利用工具Vue官方提供了迁移辅助工具团队培训确保团队成员都理解Composition API的概念代码审查迁移过程中保持严格的代码审查迁移步骤示例将组件选项转换为setup函数将data属性转换为ref或reactive将methods转换为普通函数将computed属性转换为computed函数将生命周期钩子转换为onXxx函数将watch选项转换为watch或watchEffect11. 实战中的性能考量虽然Composition API本身很高效但仍需注意以下性能问题11.1 避免不必要的响应式// 不推荐 - 整个对象变成响应式但可能只需要部分属性 const state reactive({ largeData: fetchLargeData(), // 其他属性... }) // 推荐 - 只对需要响应式的部分使用ref const largeData fetchLargeData() // 普通对象 const count ref(0) // 响应式值11.2 合理使用watch和watchEffect// 不推荐 - 每次渲染都创建新的watcher function useSomething() { watch(someRef, () { // 副作用 }) } // 推荐 - 确保watcher只创建一次 function useSomething() { const stop watch(someRef, () { // 副作用 }) onUnmounted(stop) }11.3 大型列表优化对于大型列表考虑使用虚拟滚动或手动控制响应式const list ref([]) // 批量更新时先取消响应性 const rawList list.value for (let i 0; i 1000; i) { rawList.push(createItem(i)) } list.value rawList // 一次性触发更新12. 调试技巧与工具Composition API的调试与传统Vue有些不同12.1 Chrome DevTools扩展Vue DevTools已经支持Composition API的调试检查组件实例的setup状态跟踪ref和reactive值的变化查看组件层次结构12.2 自定义调试Hookimport { onRenderTracked, onRenderTriggered } from vue export function useDebug() { onRenderTracked((event) { console.log(跟踪到依赖:, event) }) onRenderTriggered((event) { console.log(触发重新渲染:, event) }) }12.3 日志调试function useSomething() { const state reactive({ /* ... */ }) // 添加调试日志 watchEffect(() { console.log(状态变化:, state) }) return { state } }13. 社区资源与学习路径要深入学习Composition API可以参考以下资源13.1 官方文档Vue 3官方文档Composition API RFC迁移指南13.2 优质教程Vue Mastery的Vue 3课程官方示例项目社区博客和技术文章13.3 开源项目参考研究使用Composition API的开源项目VueUse - 组合式工具集合Nuxt.js - 最新版本已支持Vue 3Vuetify - Material组件库的Vue 3版本14. 未来展望与演进方向虽然我们已经介绍了Composition API的核心用法但Vue生态系统仍在不断演进更好的TypeScript支持Vue团队持续改进类型推断更多官方组合式函数如VueUse风格的实用工具性能优化编译器级别的改进教育资料丰富更多教程和最佳实践15. 总结与个人实践心得通过这5个真实项目案例我们从不同角度探索了Composition API的强大功能。在实际项目中我发现以下几点特别有价值逻辑复用变得简单不再受限于mixins的命名冲突问题代码组织更灵活可以按照功能而非选项类型组织代码类型支持更好与TypeScript配合更加自然测试更简单组合式函数可以独立于组件进行测试迁移到Composition API可能需要一些适应时间但一旦熟悉你会发现它能让你的Vue代码更加清晰、可维护和可扩展。