Vue 3 Composition API 深度解析

ClownF原创2024/1/15大约 2 分钟

Vue 3 Composition API 深度解析

Vue 3 引入的 Composition API 为我们提供了更灵活的代码组织方式和更好的逻辑复用能力。

什么是 Composition API

Composition API 是 Vue 3 中的一组用于组织组件逻辑的函数式 API。它解决了 Options API 在大型组件中的一些限制。

核心概念

setup 函数

setup 是 Composition API 的入口点：

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    return {
      count,
      doubleCount,
      increment
    }
  }
}

响应式引用

ref() - 创建响应式引用
reactive() - 创建响应式对象
computed() - 创建计算属性
watch() / watchEffect() - 侦听数据变化

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

const count = ref(0)
const state = reactive({ name: 'Vue 3' })
const doubled = computed(() => count.value * 2)

watch(count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`)
})

生命周期钩子

Composition API 中的生命周期钩子：

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

setup() {
  onMounted(() => {
    console.log('组件已挂载')
  })
  
  onUpdated(() => {
    console.log('组件已更新')
  })
  
  onUnmounted(() => {
    console.log('组件即将卸载')
  })
}

逻辑复用

使用组合式函数（Composables）实现逻辑复用：

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

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

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

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

最佳实践

合理组织代码: 按功能而非选项组织代码
提取可复用逻辑: 使用组合式函数
保持简洁: 避免过度抽象
类型支持: 配合 TypeScript 使用

总结

Composition API 为 Vue 3 带来了更强大的代码组织能力，特别适合：

大型复杂组件
需要复用逻辑的场景
TypeScript 项目