Vue 3 Composition API 最佳实践：2025 实战指南

Vue 3 Composition API 最佳实践：2025 实战指南

Vue 3 的 Composition API 彻底改变了组件逻辑组织方式。本文深入解析组合式函数设计模式、响应式原理与 TypeScript 集成的最佳实践。

🎯 为什么需要 Composition API？

Options API 在复杂组件中容易导致代码分散（相同逻辑关注点在不同选项块中），Composition API 通过逻辑功能聚合解决了这一问题。

📦 核心 API 快速上手

1. ref 与 reactive

import { ref, reactive } from 'vue'

// ref：适合基本类型
const count = ref(0)
count.value++ // 访问/修改需要 .value

// reactive：适合对象
const state = reactive({ count: 0, name: 'Vue 3' })
state.count++ // 直接访问

2. computed 与 watch

import { computed, watch } from 'vue'

const doubled = computed(() => count.value * 2)

watch(count, (newVal, oldVal) => {
  console.log(`count changed: ${oldVal} -> ${newVal}`)
})

3. 组合式函数（Composables）

组合式函数是 Vue 3 最重要的抽象模式，类似 React 的 Hooks：

// useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue
  
  return { count, increment, decrement, reset }
}

// 在组件中使用
import { useCounter } from './useCounter'
const { count, increment } = useCounter(10)

⚡ script setup 语法糖

<script setup>
import { ref } from 'vue'
import { useCounter } from './useCounter'

const { count, increment } = useCounter()
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

🔧 TypeScript 集成

import { ref } from 'vue'

interface User {
  name: string
  age: number
}

const user = ref<User>({ name: 'John', age: 25 })
// 类型推导正常工作
user.value.name // string

🏆 最佳实践总结

1. 优先使用 ref：对于基本类型和需要重新赋值的变量
2. 组合式函数命名：以 use 开头（如 useCounter、useFetch）
3. 逻辑复用：将相关逻辑抽取到组合式函数，提高可维护性
4. 避免过度抽象：简单组件不需要强制使用 Composition API
5. 使用 <script setup>：更简洁的语法，更好的 Tree-shaking

总结：Composition API 是 Vue 3 的核心特性，掌握组合式函数和逻辑复用模式，能大幅提升代码组织和维护效率。

---

本文整理自 Vue 3 官方文档及掘金技术社区热门文章