Vue 3 Composition API 深度解析

Vue 3 的 Composition API 是一个革命性的特性，它改变了我们编写 Vue 组件的方式。

为什么需要 Composition API？

在 Vue 2 中，我们使用 Options API 来组织组件代码。虽然这种方式简单易懂，但在处理复杂组件时，相关的逻辑往往分散在不同的选项中，导致代码难以维护。

Composition API 通过将相关的逻辑组织在一起，解决了这个问题。

核心概念

1. setup 函数

<script setup>
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

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

onMounted(() => {
  console.log('组件已挂载')
})
</script>

2. 响应式引用

import { ref, reactive } from 'vue'

// 基本类型使用 ref
const name = ref('Vue 3')

// 对象类型使用 reactive
const user = reactive({
  name: 'John',
  age: 30
})

3. 计算属性

import { computed } from 'vue'

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})

生命周期钩子

import { onMounted, onUnmounted, onUpdated } from 'vue'

onMounted(() => {
  // 组件挂载后执行
})

onUnmounted(() => {
  // 组件卸载前执行
})

onUpdated(() => {
  // 组件更新后执行
})

组合式函数

Composition API 最强大的特性之一是组合式函数（Composables）：

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

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

最佳实践

1. 逻辑复用: 使用组合式函数来复用逻辑
2. 关注点分离: 将相关的逻辑组织在一起
3. 类型安全: 结合 TypeScript 使用获得更好的类型支持
4. 渐进式采用: 可以在同一个项目中混合使用 Options API 和 Composition API

Composition API 为 Vue 3 带来了更强大的逻辑复用能力和更好的代码组织方式，是现代 Vue 开发的重要工具。