Vue 3 Composition API 完全指南

简介

Vue 3 引入了 Composition API，这是一种全新的组织组件逻辑的方式。相比 Options API，它提供了更好的代码组织能力和逻辑复用性。

核心概念

setup 函数

setup() 是 Composition API 的入口点，在组件创建之前执行：

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

export default {
  setup() {
    const count = ref(0)
    const user = reactive({
      name: 'CST',
      age: 25
    })

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

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

    onMounted(() => {
      console.log('Component mounted!')
    })

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

ref vs reactive

特性	ref	reactive
适用类型	任意类型	对象/数组
访问方式	.value	直接访问
解构	保持响应性	丢失响应性

生命周期钩子

Composition API 中的生命周期钩子以 on 前缀开头：

import {
  onMounted,
  onUpdated,
  onUnmounted,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount
} from 'vue'

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

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

实战：自定义 Hook

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

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const doubled = computed(() => count.value * 2)

  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue

  return {
    count,
    doubled,
    increment,
    decrement,
    reset
  }
}

总结

Composition API 让 Vue 3 的代码组织更加灵活，特别适合大型项目的开发。通过合理使用 ref、reactive、computed 等API，可以编写出更清晰、更可维护的代码。