Vue.js 3.0 组合式 API 实战指南

什么是组合式 API

组合式 API（Composition API）是 Vue 3.0 引入的一组 API，允许我们使用导入的函数而不是声明选项来编写 Vue 组件。

为什么使用组合式 API

更好的逻辑复用

组合式 API 提供了更好的逻辑复用能力，可以将相关逻辑提取到可复用的函数中。

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

export function useCounter() {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }
  
  return { count, doubleCount, increment }
}

更灵活的代码组织

在选项式 API 中，代码按照选项类型组织（data、methods、computed 等）。而在组合式 API 中，代码按照逻辑功能组织。

// 组合式 API - 按功能组织
import { ref, onMounted } from 'vue'

export default {
  setup() {
    // 用户相关逻辑
    const user = ref(null)
    const fetchUser = async () => {
      // ...
    }
    
    // 订单相关逻辑
    const orders = ref([])
    const fetchOrders = async () => {
      // ...
    }
    
    onMounted(() => {
      fetchUser()
      fetchOrders()
    })
    
    return { user, orders }
  }
}

实战案例：待办事项应用

让我们使用组合式 API 创建一个简单的待办事项应用。

总结

组合式 API 为 Vue 开发带来了更大的灵活性和更好的代码组织能力。虽然学习曲线稍陡，但掌握后会让你的开发效率大大提升。