Vue 3 Composition API 完全指南

Vue 3 引入了 Composition API，这是一种全新的组件编写方式。相比于 Options API，Composition API 提供了更好的代码组织、类型推导和逻辑复用能力。

为什么需要 Composition API？

在 Vue 2 中，我们使用 Options API 来组织代码，将相关逻辑分散在 data、methods、computed、watch 等选项中。当组件变得复杂时，相关功能的代码会被拆分到不同的选项中，导致代码难以阅读和维护。

核心概念：setup 函数

setup 是 Composition API 的入口点，它在组件创建之前执行，此时还没有 this 上下文。

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

export default {
  setup() {
    // 响应式数据
    const count = ref(0)
    const state = reactive({
      name: 'KateHub',
      items: []
    })

    // 计算属性
    const doubleCount = computed(() => count.value * 2)

    // 方法
    function increment() {
      count.value++
    }

    // 返回给模板使用
    return {
      count,
      state,
      doubleCount,
      increment
    }
  }
}

ref vs reactive

这是初学者最常问的问题之一：

• ref：用于基本类型和单一值，通过 .value 访问
• reactive：用于对象和数组，直接访问属性

生命周期钩子

在 Composition API 中，生命周期钩子以 on 为前缀：

import { onMounted, onUnmounted } from 'vue'

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

  onUnmounted(() => {
    console.log('组件将卸载')
  })
}

script setup 语法糖

Vue 3.2 引入了 <script setup> 语法，让代码更加简洁：

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

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

function increment() {
  count.value++
}
</script>

总结

Composition API 是 Vue 3 最重要的特性之一，它让我们能够更灵活地组织代码，更好地实现逻辑复用。建议新项目直接使用 script setup 语法，它是 Composition API 的语法糖，代码更简洁。