1. 为什么需要关注Vue3组合式API在Vue3发布之初组合式APIComposition API的引入曾引发不少争议。但经过三年多的实践检验这套API已经成为现代Vue开发的标配工具。我最初接触时也有疑虑直到在一个大型后台管理系统项目中亲身体验后才真正理解其价值所在。组合式API不是对选项式API的简单替代而是提供了更灵活的逻辑组织方式。当组件代码超过300行时你会发现原本分散在data、methods、computed等选项中的相关逻辑现在可以聚合在同一处。这种关注点分离而非选项分离的编码方式让复杂组件的维护变得轻松许多。2. 核心API解析与使用场景2.1 ref与reactive响应式基石ref和reactive是构建响应式系统的两个基础API。新手常困惑于二者的选择我的经验法则是对基本类型string/number/boolean使用ref对对象和数组优先考虑reactive当需要保持引用稳定性时如在组合函数中返回状态使用ref// 典型用法对比 const count ref(0) // 基本类型 const user reactive({ name: Alice, age: 25 }) // 复杂对象 // ref解包的注意事项 console.log(count.value) // 模板中自动解包JS中需.value重要提示在组合函数中返回响应式状态时务必使用toRefs保持响应性function useFeature() { const state reactive({ x: 0, y: 0 }) return { ...toRefs(state) } // 保持响应性 }2.2 computed智能衍生数据计算属性在表单验证、数据过滤等场景不可或缺。Vue3的computed可以单独使用配合TypeScript时类型推断非常精准const doubleCount computed(() count.value * 2) // 带setter的计算属性 const writableComputed computed({ get: () count.value 1, set: (val) { count.value val - 1 } })在性能敏感场景建议给计算属性添加缓存标记const expensiveValue computed(() heavyCalculation(), { cache: false // 慎用多数情况应保持默认缓存 })2.3 watch与watchEffect响应式监听watch和watchEffect的差异常被混淆。根据我的调试经验watch需要明确指定依赖源适合精确控制触发时机watchEffect自动收集依赖但首次必定执行// 监听单个ref watch(count, (newVal) console.log(count changed:, newVal)) // 监听多个源 watch([count, doubleCount], ([newCount, newDouble]) { /* 处理逻辑 */ }) // watchEffect的典型用法 const stop watchEffect((onCleanup) { const token performAsyncOperation(user.id) onCleanup(() { // 清理副作用 token.cancel() }) }) // 手动停止监听 stop()对于深度监听对象推荐显式指定deep选项以避免性能问题watch( () state.someObject, (newVal) { /* 处理 */ }, { deep: true, flush: post } // flush控制触发时机 )3. 生命周期钩子的现代化使用Vue3的生命周期钩子都以on前缀开头可以直接在setup中使用。在SSR项目中要特别注意import { onMounted, onUpdated } from vue onMounted(() { console.log(客户端渲染完成后执行) }) onUpdated(() { // 避免在此处修改状态可能导致无限循环 })我整理了一个生命周期对照表供参考选项式API组合式API触发时机beforeCreate-被setup替代created-被setup替代beforeMountonBeforeMount挂载开始前mountedonMounted挂载完成后beforeUpdateonBeforeUpdate数据变化, DOM更新前updatedonUpdated数据变化, DOM更新后beforeUnmountonBeforeUnmount卸载前unmountedonUnmounted卸载后4. 依赖注入的现代化实践provide/inject在组件深层传递数据时非常有用特别是在开发组件库时。我常用的模式是// 祖先组件 const theme ref(dark) provide(theme, readonly(theme)) // 使用readonly防止意外修改 // 后代组件 const theme inject(theme, light) // 提供默认值对于TypeScript项目建议定义注入的key为Symbol// keys.ts export const THEME_KEY Symbol() as InjectionKeyRefstring // 提供者 provide(THEME_KEY, theme) // 使用者 const theme inject(THEME_KEY)5. 模板引用与组件通信ref不仅可以用于响应式数据还能获取DOM元素和组件实例const inputRef refHTMLInputElement | null(null) onMounted(() { inputRef.value?.focus() }) // 子组件暴露方法 const childRef ref{ validate: () boolean }()在script setup中需要使用defineExpose显式暴露// 子组件 defineExpose({ validate: () { /* 验证逻辑 */ } })6. 自定义Hook的工程化实践组合式API最强大的特性是能够创建自定义Hook。在大型项目中我通常这样组织hooks/ useForm.ts # 表单处理 usePagination.ts # 分页逻辑 useFetch.ts # 数据请求一个典型的useFetch实现export default function useFetchT(url: string) { const data refT | null(null) const error refError | null(null) const loading ref(false) const fetchData async () { loading.value true try { const response await fetch(url) data.value await response.json() } catch (err) { error.value err as Error } finally { loading.value false } } onMounted(fetchData) return { data, error, loading, retry: fetchData } }7. 状态管理的新思路虽然Pinia是官方推荐的状态管理库但在中小项目中组合式API本身就能实现优雅的状态共享// store.js export const useStore () { const state reactive({ count: 0 }) const increment () state.count return { state, increment } } // 组件中使用 const { state, increment } useStore()这种模式在需要多个实例的场景特别有用因为每次调用useStore都会创建新的状态实例。8. 性能优化相关API8.1 shallowRef与shallowReactive当不需要深层响应时使用浅层响应式可以提升性能const shallowObj shallowReactive({ nested: { value: 1 } }) shallowObj.nested.value 2 // 不会触发响应8.2 customRef实现防抖function useDebouncedRef(value, delay 200) { let timeout return customRef((track, trigger) { return { get() { track() return value }, set(newValue) { clearTimeout(timeout) timeout setTimeout(() { value newValue trigger() }, delay) } } }) }9. 与TypeScript的深度集成组合式API对TypeScript的支持非常优秀。一些类型工具的使用技巧// 定义props类型 const props defineProps{ title: string disabled?: boolean }() // 定义emit事件 const emit defineEmits{ (e: update, id: number): void (e: delete): void }() // 使用ExtractPropTypes获取props类型 import type { ExtractPropTypes } from vue const propsDefinition { title: String, disabled: Boolean } type Props ExtractPropTypestypeof propsDefinition10. 其他实用API锦集10.1 nextTick的使用场景async function handleClick() { await nextTick() // 等待DOM更新 // 操作更新后的DOM }10.2 v-model的组件实现const modelValue defineModel() // Vue 3.4 // 或传统方式 const props defineProps([modelValue]) const emit defineEmits([update:modelValue])10.3 动态组件与KeepAliveconst currentComponent shallowRef(ComponentA) KeepAlive component :iscurrentComponent / /KeepAlive在实际项目中组合式API的最佳实践是渐进式采用。对于新项目可以全面使用script setup语法对于老项目可以从逻辑复用的部分开始逐步迁移。我个人的经验是当组件逻辑超过200行时组合式API的优势会变得非常明显。