Vue 3 Composition API 实战指南

Vue 3 的 Composition API 是 Vue 3 中最重要的新特性之一，它提供了一种新的编写组件的方式，让我们可以更好地组织组件逻辑。本文将深入探讨 Composition API 的使用技巧和最佳实践。

什么是 Composition API？

Composition API 是 Vue 3 引入的新的 API 风格，它允许我们使用函数而非选项来组织组件逻辑。这种方式有几个主要优势：

• 更好的逻辑复用性
• 更灵活的代码组织方式
• 更好的 TypeScript 支持
• 更高效的组件性能

setup 函数

setup 函数是 Composition API 的入口点，它在组件实例创建之前执行，这意味着在 setup 中我们不能访问 this。

import { ref, reactive } from 'vue'

export default {
  setup() {
    // 响应式状态
    const count = ref(0)
    const state = reactive({
      name: 'Vue 3',
      version: '3.2.0'
    })
    
    // 方法
    const increment = () => {
      count.value++
    }
    
    // 返回需要在模板中使用的数据和方法
    return {
      count,
      state,
      increment
    }
  }
}

响应式引用（Refs）

ref 函数用于创建一个响应式的引用类型数据，它可以包装任何 JavaScript 类型。

import { ref } from 'vue'

const count = ref(0)
const message = ref('Hello Vue 3')
const user = ref({ name: 'John', age: 30 })

// 访问 ref 值需要使用 .value
console.log(count.value) // 0

// 修改值
count.value++
user.value.name = 'Jane'

响应式对象（Reactive）

reactive 函数用于创建一个响应式的对象，它只能接受对象类型的数据。

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  user: {
    name: 'John',
    age: 30
  },
  todos: [
    { id: 1, text: 'Learn Vue 3', done: false },
    { id: 2, text: 'Practice Composition API', done: false }
  ]
})

// 直接访问和修改属性
state.count++
state.user.name = 'Jane'
state.todos.push({ id: 3, text: 'Build a project', done: false })

Computed 和 Watch

Composition API 提供了 computed 和 watch 函数来处理计算属性和侦听器。

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

const count = ref(0)

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

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

// 侦听多个源
watch([count, () => state.name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(`Count: ${oldCount} -> ${newCount}`)
  console.log(`Name: ${oldName} -> ${newName}`)
})

生命周期钩子

在 Composition API 中，生命周期钩子以函数的形式导出，需要在 setup 函数中使用。

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

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted')
    })
    
    onUpdated(() => {
      console.log('Component updated')
    })
    
    onUnmounted(() => {
      console.log('Component unmounted')
    })
    
    return {}
  }
}

组合式函数

组合式函数是 Composition API 最强大的特性之一，它允许我们封装和复用组件逻辑。

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

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

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

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

最佳实践

使用 Composition API 时，以下是一些推荐的最佳实践：

1. 按功能组织逻辑，将相关的状态和方法放在一起
2. 使用组合式函数封装可复用的逻辑
3. 优先使用 ref 还是 reactive 取决于个人偏好和具体场景
4. 避免在 setup 中过度使用 this
5. 合理使用 TypeScript 来增强代码的类型安全性

总结

Vue 3 的 Composition API 提供了一种更灵活、更强大的组件编写方式，它让我们可以更好地组织和复用代码。通过本文的介绍，相信你已经对 Composition API 有了更深入的了解，并且可以在实际项目中应用它。