Vue 3 Composition API 深度解析

Vue 3 引入的 Composition API 是一个革命性的特性，它为我们提供了更灵活、更强大的组件逻辑组织方式。

为什么需要 Composition API？

在 Vue 2 的 Options API 中，我们通过不同的选项（data、methods、computed等）来组织代码。但随着组件变得复杂，相关的逻辑会分散在不同的选项中，导致代码难以维护。

export default {
  data() {
    return {
      count: 0,
      message: 'Hello'
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  }
}

Composition API 的优势

1. 更好的逻辑复用

使用 Composition API，我们可以将相关的逻辑提取到可复用的函数中：

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

export function useCounter(initial = 0) {
  const count = ref(initial)
  const doubleCount = computed(() => count.value * 2)

  const increment = () => {
    count.value++
  }

  return {
    count,
    doubleCount,
    increment
  }
}

2. 更好的类型推导

TypeScript 可以更好地推导 Composition API 的类型：

<script setup lang="ts">
import { ref } from 'vue'

const count = ref<number>(0) // 自动推导类型
const message = ref('Hello') // string 类型
</script>

3. 更灵活的代码组织

相关的逻辑可以组织在一起，而不是分散在不同的选项中：

<script setup lang="ts">
// 用户相关逻辑
const user = ref(null)
const fetchUser = async () => { /* ... */ }
const updateUser = async () => { /* ... */ }

// 文章相关逻辑
const posts = ref([])
const fetchPosts = async () => { /* ... */ }
const createPost = async () => { /* ... */ }
</script>

最佳实践

1. 使用 <script setup> - 更简洁的语法
2. 提取可复用逻辑到 composables - 保持组件清晰
3. 合理使用 ref 和 reactive - 根据场景选择
4. 避免过度抽象 - 保持代码可读性

总结

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