Vue 3 Composition API 完全指南

Vue 3 Composition API 完全指南

Vue 3 的 Composition API 是一个重大的改进，它提供了更好的代码组织和复用性。

什么是 Composition API？

Composition API 是一种基于函数的 API，允许我们按功能组织代码，而不是按选项。

基本用法

setup() 函数

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

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: '张三' })

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

    function increment() {
      count.value++
    }

    return { count, user, doubleCount, increment }
  }
}

<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>

<template>
  <div>{{ count }} × 2 = {{ doubleCount }}</div>
  <button @click="increment">+1</button>
</template>

核心 API

1. ref 和 reactive

• ref()：用于基本类型
• reactive()：用于对象

const count = ref(0)         // 基本类型
const state = reactive({    // 对象
  name: 'Vue',
  version: 3
})

2. computed

计算属性，具有缓存特性：

const firstName = ref('张')
const lastName = ref('三')

const fullName = computed({
  get() {
    return firstName.value + lastName.value
  },
  set(value) {
    [firstName.value, lastName.value] = value.split('')
  }
})

3. watch 和 watchEffect

• watch：特定源
• watchEffect：自动追踪依赖

const count = ref(0)

// watch：指定源
watch(count, (newVal, oldVal) => {
  console.log(`count 变化: ${oldVal} → ${newVal}`)
})

// watchEffect：自动追踪
watchEffect(() => {
  console.log(`当前 count: ${count.value}`)
})

生命周期

import { onMounted, onUnmounted } from 'vue'

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

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

自定义 Composables

这是 Composition API 最强大的特性：

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

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)

  function increment() { count.value++ }
  function decrement() { count.value-- }
  function reset() { count.value = initialValue }

  return { count, increment, decrement, reset }
}

// 使用
import { useCounter } from './useCounter'

const { count, increment, decrement, reset } = useCounter(10)

优势总结

更好的代码组织：按功能逻辑分组 更简洁的类型推断：更好的 TypeScript 支持 更强的复用性：通过 composables 共享逻辑 更灵活的树摇：未使用的代码可以被优化掉

总结

Composition API 是 Vue 3 的未来，它让代码：

• 更清晰
• 更易维护
• 更易测试
• 更易复用

如果你还在使用 Options API，是时候尝试 Composition API 了！