Vue 3 组合式 API 完全指南

Vue 3 引入的组合式 API（Composition API）为我们提供了更灵活的代码组织方式。

为什么使用组合式 API？

传统的选项式 API 在处理大型组件时，相关逻辑会分散在不同的选项中。组合式 API 允许我们按功能组织代码。

setup 函数

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

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

function increment() {
  count.value++
}

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

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

响应式核心

ref vs reactive

import { ref, reactive } from 'vue'

// ref 适合基本类型
const count = ref(0)
count.value++

// reactive 适合对象
const state = reactive({
  name: '张三',
  age: 25
})
state.age++

生命周期钩子

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

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

onUpdated(() => {
  console.log('组件更新')
})

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

自定义组合式函数

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

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

使用：

<script setup>
import { useCounter } from './useCounter'

const { count, increment, decrement } = useCounter()
</script>

最佳实践

1. 使用 <script setup> 简化语法
2. 合理拆分组合式函数
3. 利用 TypeScript 增强类型安全
4. 遵循命名约定（use 开头）

总结

组合式 API 让 Vue 3 更加强大和灵活，是现代 Vue 开发的首选方式。