Vue 3 Composition API实战：从基础语法到复杂组件状态管理

引言

Vue.js作为当前最流行的前端框架之一，其生态系统不断演进。Vue 3的发布带来了革命性的变化，其中最引人注目的就是Composition API的引入。相比于Vue 2中的选项式API（Options API），Composition API为开发者提供了更加灵活、可复用和模块化的组件开发方式。

本文将深入探讨Vue 3 Composition API的核心特性，从基础语法到高级用法，结合实际项目案例展示如何构建可复用、可维护的Vue组件，从而提升前端开发效率和代码质量。

Vue 3 Composition API概述

什么是Composition API？

Composition API是Vue 3中引入的一种新的组件开发模式，它允许开发者通过组合函数的方式来组织和复用逻辑代码。与传统的选项式API不同，Composition API将组件的逻辑按照功能进行分组，而不是按照选项类型（data、methods、computed等）来组织。

Composition API的核心优势

1. 更好的逻辑复用：通过组合函数实现逻辑复用，避免了Mixin带来的命名冲突问题
2. 更灵活的代码组织：可以根据业务逻辑而非数据类型来组织代码
3. 更强的类型支持：与TypeScript集成更好，提供更好的开发体验
4. 更清晰的代码结构：便于理解和维护复杂的组件逻辑

基础语法详解

setup函数

setup是Composition API的入口函数，在组件创建之前执行。它接收两个参数：props和context。

import { ref, reactive } from 'vue'

export default {
  props: {
    title: String
  },
  setup(props, context) {
    // 组件逻辑在这里编写
    console.log(props.title) // 访问props
    
    // 返回需要在模板中使用的数据和方法
    return {
      // 这些属性可以在模板中访问
    }
  }
}

响应式数据声明

ref函数

ref用于创建响应式的数据引用，适用于基本类型数据：

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const name = ref('Vue')
    
    // 访问值需要使用.value
    console.log(count.value) // 0
    
    // 修改值
    count.value = 10
    
    return {
      count,
      name
    }
  }
}

reactive函数

reactive用于创建响应式对象，适用于复杂数据结构：

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      user: {
        name: 'John',
        age: 25
      },
      todos: []
    })
    
    // 直接访问属性，无需.value
    console.log(state.count) // 0
    
    // 修改属性
    state.count = 10
    state.user.name = 'Jane'
    
    return {
      state
    }
  }
}

计算属性和监听器

computed函数

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')
    
    // 基本计算属性
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`
    })
    
    // 带getter和setter的计算属性
    const reversedName = computed({
      get: () => {
        return firstName.value.split('').reverse().join('')
      },
      set: (value) => {
        firstName.value = value.split('').reverse().join('')
      }
    })
    
    return {
      firstName,
      lastName,
      fullName,
      reversedName
    }
  }
}

watch函数

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const name = ref('Vue')
    
    // 监听单个ref
    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`)
    })
    
    // 监听多个数据源
    watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`count: ${oldCount} -> ${newCount}, name: ${oldName} -> ${newName}`)
    })
    
    // 深度监听
    const state = reactive({ user: { name: 'John' } })
    watch(state, (newValue, oldValue) => {
      console.log('state changed:', newValue)
    }, { deep: true })
    
    return {
      count,
      name
    }
  }
}

实际项目案例：用户管理系统

让我们通过一个实际的用户管理系统的例子来展示Composition API的强大功能。

基础组件结构

<template>
  <div class="user-management">
    <h2>用户管理系统</h2>
    
    <!-- 搜索区域 -->
    <div class="search-section">
      <input v-model="searchQuery" placeholder="搜索用户名..." />
      <button @click="clearSearch">清除</button>
    </div>
    
    <!-- 用户列表 -->
    <div class="user-list">
      <div 
        v-for="user in filteredUsers" 
        :key="user.id"
        class="user-item"
      >
        <div class="user-info">
          <h3>{{ user.name }}</h3>
          <p>{{ user.email }}</p>
          <p>注册时间: {{ formatDate(user.createdAt) }}</p>
        </div>
        <div class="user-actions">
          <button @click="editUser(user)">编辑</button>
          <button @click="deleteUser(user.id)">删除</button>
        </div>
      </div>
    </div>
    
    <!-- 分页 -->
    <div class="pagination">
      <button 
        @click="currentPage--" 
        :disabled="currentPage === 1"
      >
        上一页
      </button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button 
        @click="currentPage++" 
        :disabled="currentPage === totalPages"
      >
        下一页
      </button>
    </div>
    
    <!-- 编辑模态框 -->
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <h3>{{ editingUser ? '编辑用户' : '添加用户' }}</h3>
        <form @submit.prevent="saveUser">
          <input 
            v-model="formData.name" 
            placeholder="用户名" 
            required 
          />
          <input 
            v-model="formData.email" 
            type="email" 
            placeholder="邮箱" 
            required 
          />
          <button type="submit">保存</button>
          <button type="button" @click="showModal = false">取消</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, watch } from 'vue'
import { useUserStore } from '@/stores/user'

export default {
  name: 'UserManagement',
  setup() {
    // 状态管理
    const users = ref([])
    const loading = ref(false)
    const searchQuery = ref('')
    const currentPage = ref(1)
    const showModal = ref(false)
    const editingUser = ref(null)
    
    // 表单数据
    const formData = reactive({
      name: '',
      email: ''
    })
    
    // 使用store
    const userStore = useUserStore()
    
    // 计算属性
    const filteredUsers = computed(() => {
      if (!searchQuery.value) return users.value
      
      return users.value.filter(user => 
        user.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
        user.email.toLowerCase().includes(searchQuery.value.toLowerCase())
      )
    })
    
    const totalPages = computed(() => {
      const perPage = 10
      return Math.ceil(filteredUsers.value.length / perPage)
    })
    
    const paginatedUsers = computed(() => {
      const perPage = 10
      const start = (currentPage.value - 1) * perPage
      const end = start + perPage
      return filteredUsers.value.slice(start, end)
    })
    
    // 方法定义
    const fetchUsers = async () => {
      loading.value = true
      try {
        const response = await userStore.fetchUsers()
        users.value = response.data
      } catch (error) {
        console.error('获取用户失败:', error)
      } finally {
        loading.value = false
      }
    }
    
    const editUser = (user) => {
      editingUser.value = user
      formData.name = user.name
      formData.email = user.email
      showModal.value = true
    }
    
    const deleteUser = async (userId) => {
      if (confirm('确定要删除这个用户吗？')) {
        try {
          await userStore.deleteUser(userId)
          users.value = users.value.filter(user => user.id !== userId)
        } catch (error) {
          console.error('删除用户失败:', error)
        }
      }
    }
    
    const saveUser = async () => {
      try {
        if (editingUser.value) {
          // 更新用户
          await userStore.updateUser(editingUser.value.id, formData)
          const index = users.value.findIndex(u => u.id === editingUser.value.id)
          users.value[index] = { ...users.value[index], ...formData }
        } else {
          // 添加新用户
          const newUser = await userStore.createUser(formData)
          users.value.push(newUser)
        }
        
        showModal.value = false
        resetForm()
      } catch (error) {
        console.error('保存用户失败:', error)
      }
    }
    
    const clearSearch = () => {
      searchQuery.value = ''
    }
    
    const resetForm = () => {
      formData.name = ''
      formData.email = ''
      editingUser.value = null
    }
    
    const formatDate = (dateString) => {
      return new Date(dateString).toLocaleDateString()
    }
    
    // 生命周期钩子
    const init = () => {
      fetchUsers()
    }
    
    // 监听器
    watch(currentPage, (newPage) => {
      // 页面变化时可以做一些处理
      console.log('切换到第', newPage, '页')
    })
    
    // 初始化组件
    init()
    
    return {
      users,
      loading,
      searchQuery,
      currentPage,
      showModal,
      editingUser,
      formData,
      filteredUsers,
      totalPages,
      paginatedUsers,
      fetchUsers,
      editUser,
      deleteUser,
      saveUser,
      clearSearch,
      formatDate
    }
  }
}
</script>

<style scoped>
.user-management {
  padding: 20px;
}

.search-section {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.user-list {
  margin-bottom: 20px;
}

.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 5px;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  min-width: 300px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
}
</style>

高级用法与最佳实践

组合函数（Composable Functions）

组合函数是Composition API的核心概念，它允许我们将可复用的逻辑封装成独立的函数。

// composables/useLocalStorage.js
import { ref, watch } from 'vue'

export function useLocalStorage(key, defaultValue) {
  const storedValue = localStorage.getItem(key)
  const value = ref(storedValue ? JSON.parse(storedValue) : defaultValue)
  
  watch(value, (newValue) => {
    localStorage.setItem(key, JSON.stringify(newValue))
  }, { deep: true })
  
  return value
}

// composables/useFetch.js
import { ref, reactive } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)
  
  const fetchData = async () => {
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch(url)
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      data.value = await response.json()
    } catch (err) {
      error.value = err.message
    } finally {
      loading.value = false
    }
  }
  
  return {
    data,
    loading,
    error,
    fetchData
  }
}

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

export function usePagination(items, perPage = 10) {
  const currentPage = ref(1)
  
  const totalPages = computed(() => {
    return Math.ceil(items.value.length / perPage)
  })
  
  const paginatedItems = computed(() => {
    const start = (currentPage.value - 1) * perPage
    const end = start + perPage
    return items.value.slice(start, end)
  })
  
  const goToPage = (page) => {
    if (page >= 1 && page <= totalPages.value) {
      currentPage.value = page
    }
  }
  
  const nextPage = () => {
    if (currentPage.value < totalPages.value) {
      currentPage.value++
    }
  }
  
  const prevPage = () => {
    if (currentPage.value > 1) {
      currentPage.value--
    }
  }
  
  return {
    currentPage,
    totalPages,
    paginatedItems,
    goToPage,
    nextPage,
    prevPage
  }
}

复杂状态管理

在大型应用中，我们需要更复杂的状态管理方案。以下是一个使用组合函数实现的复杂状态管理示例：

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

export function useUserState() {
  // 用户相关的状态
  const currentUser = ref(null)
  const isLoggedIn = computed(() => !!currentUser.value)
  
  // 权限相关状态
  const permissions = ref([])
  const roles = ref([])
  
  // 用户偏好设置
  const preferences = ref({
    theme: 'light',
    language: 'zh-CN',
    notifications: true
  })
  
  // 计算属性
  const userPermissions = computed(() => {
    if (!isLoggedIn.value) return []
    return permissions.value
  })
  
  const hasPermission = (permission) => {
    return userPermissions.value.includes(permission)
  }
  
  const hasRole = (role) => {
    return roles.value.includes(role)
  }
  
  // 方法
  const login = (userData) => {
    currentUser.value = userData
    permissions.value = userData.permissions || []
    roles.value = userData.roles || []
  }
  
  const logout = () => {
    currentUser.value = null
    permissions.value = []
    roles.value = []
  }
  
  const updatePreferences = (newPreferences) => {
    preferences.value = { ...preferences.value, ...newPreferences }
  }
  
  const updateUser = (userData) => {
    if (currentUser.value?.id === userData.id) {
      currentUser.value = { ...currentUser.value, ...userData }
    }
  }
  
  return {
    // 状态
    currentUser,
    isLoggedIn,
    permissions,
    roles,
    preferences,
    
    // 计算属性
    userPermissions,
    hasPermission,
    hasRole,
    
    // 方法
    login,
    logout,
    updatePreferences,
    updateUser
  }
}

// composables/useApi.js
import { ref, reactive } from 'vue'

export function useApi() {
  const api = reactive({
    baseURL: '/api',
    headers: {
      'Content-Type': 'application/json'
    }
  })
  
  const loading = ref(false)
  const error = ref(null)
  
  const request = async (url, options = {}) => {
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch(`${api.baseURL}${url}`, {
        ...options,
        headers: {
          ...api.headers,
          ...options.headers
        }
      })
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
      }
      
      return await response.json()
    } catch (err) {
      error.value = err.message
      throw err
    } finally {
      loading.value = false
    }
  }
  
  const get = (url) => request(url, { method: 'GET' })
  const post = (url, data) => request(url, { method: 'POST', body: JSON.stringify(data) })
  const put = (url, data) => request(url, { method: 'PUT', body: JSON.stringify(data) })
  const del = (url) => request(url, { method: 'DELETE' })
  
  return {
    api,
    loading,
    error,
    get,
    post,
    put,
    del
  }
}

错误处理和加载状态

// composables/useAsyncData.js
import { ref, reactive } from 'vue'

export function useAsyncData(asyncFunction, options = {}) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)
  const retryCount = ref(0)
  
  const execute = async (...args) => {
    if (loading.value) return
    
    try {
      loading.value = true
      error.value = null
      
      const result = await asyncFunction(...args)
      data.value = result
      
      // 重置重试次数
      retryCount.value = 0
    } catch (err) {
      error.value = err.message || '请求失败'
      
      if (options.retry && retryCount.value < options.retry.maxAttempts) {
        retryCount.value++
        console.log(`重试 ${retryCount.value}/${options.retry.maxAttempts}`)
        await new Promise(resolve => setTimeout(resolve, 1000))
        return execute(...args)
      }
    } finally {
      loading.value = false
    }
  }
  
  const reset = () => {
    data.value = null
    error.value = null
    retryCount.value = 0
  }
  
  return {
    data,
    loading,
    error,
    execute,
    reset
  }
}

// 使用示例
export default {
  setup() {
    const { data, loading, error, execute } = useAsyncData(fetchUsers)
    
    // 执行异步操作
    execute()
    
    return {
      users: data,
      loading,
      error
    }
  }
}

性能优化技巧

避免不必要的计算

// 不好的做法 - 可能导致性能问题
const expensiveComputed = computed(() => {
  // 复杂的计算逻辑
  return someArray.value.map(item => {
    // 耗时操作
    return item.processedValue * 2
  })
})

// 好的做法 - 使用缓存和防抖
import { computed } from 'vue'

const expensiveComputed = computed(() => {
  // 只在依赖变化时重新计算
  return someArray.value.map(item => item.processedValue * 2)
})

合理使用watch

// 避免频繁触发的监听器
const debouncedWatch = (source, callback, options = {}) => {
  let timeoutId
  
  return watch(source, (newValue, oldValue) => {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => callback(newValue, oldValue), options.delay || 300)
  })
}

// 使用示例
const debouncedSearch = debouncedWatch(searchQuery, (newQuery) => {
  // 搜索逻辑
}, { delay: 500 })

组件通信优化

// 使用provide/inject进行深层组件通信
import { provide, inject } from 'vue'

// 父组件
export default {
  setup() {
    const sharedState = reactive({
      theme: 'light',
      language: 'zh-CN'
    })
    
    provide('appState', sharedState)
    
    return {
      sharedState
    }
  }
}

// 子组件
export default {
  setup() {
    const appState = inject('appState')
    
    return {
      appState
    }
  }
}

最佳实践总结

代码组织原则

1. 按功能分组：将相关的逻辑放在同一个组合函数中
2. 单一职责：每个组合函数应该只负责一个特定的功能
3. 可复用性：设计组合函数时要考虑通用性和可复用性

// 好的组合函数组织方式
// composables/useForm.js
export function useForm(initialData) {
  const formData = reactive({ ...initialData })
  const errors = ref({})
  
  const validate = () => {
    // 验证逻辑
  }
  
  const reset = () => {
    Object.assign(formData, initialData)
    errors.value = {}
  }
  
  return {
    formData,
    errors,
    validate,
    reset
  }
}

// composables/useValidation.js
export function useValidation() {
  const rules = ref({})
  
  const addRule = (field, validator) => {
    rules.value[field] = validator
  }
  
  const validateField = (field, value) => {
    const validator = rules.value[field]
    return validator ? validator(value) : true
  }
  
  return {
    addRule,
    validateField
  }
}

类型安全

对于TypeScript项目，可以为组合函数添加类型定义：

// composables/useUserState.ts
import { Ref } from 'vue'

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

interface UserState {
  currentUser: Ref<User | null>
  isLoggedIn: ComputedRef<boolean>
  login: (user: User) => void
  logout: () => void
}

export function useUserState(): UserState {
  // 实现...
}

总结

Vue 3的Composition API为前端开发者带来了更加灵活和强大的组件开发方式。通过本文的介绍，我们看到了从基础语法到高级用法的完整实践，包括：

1. 基础语法掌握：理解setup函数、ref、reactive、computed、watch等核心概念
2. 实际项目应用：通过用户管理系统展示了完整的开发流程
3. 高级特性运用：组合函数、复杂状态管理、错误处理等技巧
4. 性能优化：避免常见性能陷阱，提升应用响应速度
5. 最佳实践：代码组织、类型安全、可复用性等方面的指导

Composition API的核心价值在于它让开发者能够更自然地组织代码逻辑，将相关的功能组合在一起，而不是被传统的选项式API所限制。这种开发模式特别适合大型应用和团队协作，能够显著提升代码的可维护性和可扩展性。

随着Vue 3生态的不断发展，Composition API必将成为前端开发的标准实践。掌握这一技术不仅能提高个人开发效率，也能为团队带来更好的开发体验和产品质量。建议开发者在实际项目中积极尝试和应用Composition API，逐步形成自己的开发模式和最佳实践。