Vue 3 Composition API 深度解析

Vue 3 引入的 Composition API 是一个革命性的变化，它为我们提供了更灵活的代码组织方式。

为什么需要 Composition API？

在 Vue 2 的 Options API 中，我们按照选项类型（data、methods、computed 等）组织代码。当组件变得复杂时，相关的逻辑会分散在不同的选项中，难以维护。

Composition API 允许我们按照逻辑关注点组织代码，使得代码更加内聚和可复用。

基础示例

import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    // 响应式状态
    const count = ref(0)
    
    // 计算属性
    const doubleCount = computed(() => count.value * 2)
    
    // 方法
    const increment = () => {
      count.value++
    }
    
    // 生命周期
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    return {
      count,
      doubleCount,
      increment
    }
  }
}

组合式函数（Composables）

Composition API 的真正威力在于可以将逻辑提取到可复用的组合式函数中：

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

在组件中使用：

import { useCounter } from './composables/useCounter'

export default {
  setup() {
    const { count, increment, decrement } = useCounter(10)
    return { count, increment, decrement }
  }
}

最佳实践

使用 <script setup> 语法糖：更简洁的代码
合理拆分组合式函数：保持单一职责
使用 TypeScript：获得更好的类型推导
避免过度抽象：不是所有逻辑都需要提取

总结

Composition API 不是替代 Options API，而是提供了另一种选择。对于复杂组件和逻辑复用场景，Composition API 是更好的选择。

"好的代码组织方式能让维护变得轻松愉快。"

参考资料：