Vue 3 Composition API 深入理解

Vue 3 带来了全新的 Composition API，它为我们提供了更灵活的代码组织方式和更好的 TypeScript 支持。在这篇文章中，我将深入探讨 Composition API 的核心概念和最佳实践。

什么是 Composition API

Composition API 是 Vue 3 中引入的一套新的 API，它允许我们以函数的方式组织组件逻辑，而不是像 Options API 那样将逻辑分散在不同的选项中。

核心优势

更好的逻辑复用 - 通过组合函数实现逻辑的封装和复用
更好的 TypeScript 支持 - 函数式的 API 天然支持类型推断
更灵活的代码组织 - 相关逻辑可以组织在一起

响应式系统

ref 和 reactive

JAVASCRIPT

import { ref, reactive } from 'vue'

// 使用 ref 创建响应式的基本类型
const count = ref(0)

// 使用 reactive 创建响应式对象
const state = reactive({
  name: 'Vue 3',
  version: '3.0'
})

计算属性和侦听器

JAVASCRIPT

import { computed, watch } from 'vue'

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

// 侦听器
watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`)
})

生命周期钩子

Composition API 中的生命周期钩子都是以 on 开头的函数：

JAVASCRIPT

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

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

最佳实践

1. 逻辑提取和复用

将相关的逻辑提取到自定义的组合函数中：

JAVASCRIPT

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

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

2. 组件中使用

JAVASCRIPT

import { useCounter } from '@/composables/useCounter'

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

总结

Composition API 为 Vue 3 带来了更强大和灵活的组件开发体验。通过合理使用 ref、reactive、computed 等 API，我们可以构建出更加模块化和可维护的应用。

记住，Composition API 并不是要完全替代 Options API，而是为了解决复杂组件的逻辑组织问题。在简单组件中，Options API 依然是一个很好的选择。