引言

Vue 3的组合式API（Composition API）是一次重要的范式转变，它为我们提供了一种全新的组织组件逻辑的方式。相比于Vue 2的选项式API，组合式API能够让我们更好地复用代码逻辑，提高代码的可维护性。本文将深入探讨组合式API的核心概念和最佳实践。

目录

1. 组合式API的核心概念
2. setup函数与响应式系统
3. 生命周期钩子的使用
4. 逻辑复用与组合式函数
5. 实战案例分析
6. 最佳实践建议

1. 组合式API的核心概念

组合式API的核心思想是将相关联的代码组织在一起，而不是按照选项的类型分散。这种方式让代码更容易理解和维护。

主要特点：

• 更好的代码组织
• 更强的类型推导
• 更小的打包体积
• 更好的逻辑复用

2. setup函数与响应式系统

setup 函数是组合式API的入口点。它在组件创建之前执行，所以在这里无法访问 this。

import {
    
     ref, computed } from 'vue'

export default {
    
    
  setup() {
    
    
    // 声明响应式状态
    const count = ref(0)
    
    // 计算属性
    const doubleCount = computed(() => count.value * 2)
    
    // 方法
    const increment = () => {
    
    
      count.value++
    }
    
    // 返回给模板使用
    return {
    
    
      count,
      doubleCount,
      increment
    }
  }
}

响应式核心API：

• ref: 用于基本类型的响应式引用
• reactive: 用于对象的响应式代理
• computed: 创建计算属性
• watch: 响应式数据监听

3. 生命周期钩子的使用

组合式API提供了一组生命周期钩子函数：

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

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

4. 逻辑复用与组合式函数

组合式API最强大的特性之一是能够轻松创建可复用的组合式函数（Composables）。

示例：创建一个鼠标位置跟踪器

// useMousePosition.js
import {
    
     ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
    
    
  const x = ref(0)
  const y = ref(0)
  
  const updatePosition = (e) => {
    
    
    x.value = e.pageX
    y.value = e.pageY
  }
  
  onMounted(() => {
    
    
    window.addEventListener('mousemove', updatePosition)
  })
  
  onUnmounted(() => {
    
    
    window.removeEventListener('mousemove', updatePosition)
  })
  
  return {
    
     x, y }
}

使用这个组合式函数：

import {
    
     useMousePosition } from './useMousePosition'

export default {
    
    
  setup() {
    
    
    const {
    
     x, y } = useMousePosition()
    return {
    
     x, y }
  }
}

5. 实战案例分析

让我们通过一个实际的例子来展示组合式API的威力：

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

export function useUserAuth() {
    
    
  const user = ref(null)
  const isLoggedIn = computed(() => !!user.value)
  
  const login = async (credentials) => {
    
    
    // 登录逻辑
    user.value = await api.login(credentials)
  }
  
  const logout = () => {
    
    
    user.value = null
  }
  
  return {
    
    
    user,
    isLoggedIn,
    login,
    logout
  }
}

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

export function useUserProfile() {
    
    
  const profile = ref(null)
  
  const updateProfile = async (data) => {
    
    
    // 更新个人信息逻辑
    profile.value = await api.updateProfile(data)
  }
  
  return {
    
    
    profile,
    updateProfile
  }
}

// UserDashboard.vue
import {
    
     useUserAuth } from './useUserAuth'
import {
    
     useUserProfile } from './useUserProfile'

export default {
    
    
  setup() {
    
    
    const {
    
     user, isLoggedIn, logout } = useUserAuth()
    const {
    
     profile, updateProfile } = useUserProfile()
    
    return {
    
    
      user,
      isLoggedIn,
      logout,
      profile,
      updateProfile
    }
  }
}

6. 最佳实践建议

1. 保持组合式函数的单一职责

   • 每个组合式函数应该只关注一个功能点
   • 避免在一个组合式函数中混合不相关的逻辑

2. 合理使用响应式API

   • 优先使用 ref 而不是 reactive
   • 注意避免响应式数据的解构，可能会破坏响应性

3. 生命周期管理

   • 及时清理副作用
   • 确保在 onUnmounted 中移除事件监听器

4. 类型支持

   • 充分利用 TypeScript 提供的类型系统
   • 为组合式函数提供清晰的类型定义

interface UserState {
    
    
  id: number
  name: string
  email: string
}

function useUser() {
    
    
  const user = ref<UserState | null>(null)
  return {
    
     user }
}

总结

Vue 3的组合式API为我们提供了一种更灵活、更强大的组件逻辑组织方式。通过合理使用组合式API，我们可以：

1. 更好地组织和复用组件逻辑
2. 提供更好的类型推导支持
3. 实现更清晰的代码结构
4. 提高代码的可维护性

关键是要理解组合式API的核心概念，并在实践中遵循最佳实践原则。随着对组合式API的深入理解和使用，你会发现它能够大大提升开发效率和代码质量。