Vue 3 Composition API 完全指南

为什么需要 Composition API？

Composition API 提供了更好的代码组织方式，特别适合复杂组件和逻辑复用。

核心概念

setup 函数

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

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

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

响应式 API

ref: 基础类型响应式

const name = ref("Alice")
console.log(name.value)  // 访问需要 .value

reactive: 对象响应式

const user = reactive({
  name: "Alice",
  age: 25
})
console.log(user.name)  // 不需要 .value

生命周期钩子

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

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

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

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

计算属性

const firstName = ref("John")
const lastName = ref("Doe")

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (value) => {
    [firstName.value, lastName.value] = value.split(" ")
  }
})

侦听器

// 侦听单个值
watch(count, (newVal, oldVal) => {
  console.log(`count changed: ${oldVal} -> ${newVal}`)
})

// 侦听多个值
watch([count, name], ([newCount, newName]) => {
  console.log("multiple values changed")
})

// 深度侦听
watch(obj, callback, { deep: true })

// 立即执行
watch(source, callback, { immediate: true })

组合式函数 (Composables)

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

// 使用
const { count, increment } = useCounter(10)

与 Options API 对比

特性	Options API	Composition API
代码组织	按选项分组	按逻辑分组
类型推断	较弱	优秀
代码复用	mixins	composables
树摇优化	有限	更好

最佳实践

1. 使用 <script setup> 语法糖
2. 逻辑抽取为 composables
3. 命名约定：useXxx
4. 避免过度拆分

Composition API 让 Vue 代码更加灵活和可维护！