Vue 3 Composition API 开发实践

简介

Vue 3 引入了 Composition API，为组件逻辑复用和代码组织提供了更灵活的方式。

核心概念

响应式数据

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

export default {
  setup() {
    // ref 创建基本类型响应式数据
    const count = ref(0)

    // reactive 创建对象类型响应式数据
    const user = reactive({
      name: 'Allen',
      age: 25
    })

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

    return {
      count,
      user,
      doubleCount
    }
  }
}

组合式函数

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

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

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

  return {
    count,
    increment,
    decrement
  }
}

最佳实践

1. 使用组合式函数封装可复用逻辑
2. 合理使用 ref 和 reactive
3. 避免过度嵌套的响应式对象

总结

Composition API 为 Vue 3 带来了更好的代码组织方式和逻辑复用能力。