Vue 3 Composition API实战

引言

Vue 3的Composition API为开发者提供了更灵活的代码组织方式。相比Vue 2的Options API，Composition API允许我们按功能组织代码，而不是按选项类型。本文通过实际案例演示如何使用Composition API构建复杂的组件。

setup函数

setup函数是Composition API的入口，在组件创建之前执行：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    onMounted(() => {
      console.log('组件挂载完成')
    })
    
    return {
      count
    }
  }
}

响应式API

ref和reactive

import { ref, reactive } from 'vue'

// ref用于基本类型
const count = ref(0)
console.log(count.value) // 0

// reactive用于对象
const state = reactive({
  name: 'Vue',
  version: 3
})
console.log(state.name) // Vue

组合式函数

将可复用的逻辑抽取为组合式函数：

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

// 在组件中使用
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment, decrement } = useCounter(0)
    return { count, increment, decrement }
  }
}

总结

Composition API使Vue 3的代码组织更加灵活和可维护。通过组合式函数，我们可以将复杂的逻辑拆分成小的、可复用的模块，提高代码的可读性和可测试性。