Vue 3 Composition API最佳实践：从函数式编程到组件复用优化

前言

Vue 3的发布带来了革命性的变化，其中最引人注目的就是Composition API的引入。相比传统的Options API，Composition API为开发者提供了更灵活、更强大的组件开发方式。本文将深入探讨Composition API的核心优势和使用技巧，涵盖响应式数据处理、组合函数设计、组件状态管理等高级主题，并分享组件复用、逻辑抽象的实践经验。

一、Composition API核心概念与优势

1.1 什么是Composition API

Composition API是Vue 3中引入的一种新的组件开发模式，它允许我们使用函数来组织和复用组件逻辑。与传统的Options API不同，Composition API不再将组件逻辑分散在data、methods、computed等不同的选项中，而是将相关的逻辑集中在一起。

1.2 主要优势

逻辑复用性：通过组合函数，我们可以轻松地在多个组件间共享和重用逻辑代码。

更好的类型支持：Composition API与TypeScript的集成更加自然，提供了更完善的类型推断能力。

更灵活的组织方式：可以根据业务逻辑而不是数据类型来组织代码，使代码结构更清晰。

更好的开发体验：避免了Vue 2中this指向问题，使得代码更易于理解和维护。

1.3 基础API介绍

Composition API提供了几个核心函数：

• ref：创建响应式数据
• reactive：创建响应式对象
• computed：创建计算属性
• watch：监听响应式数据变化
• watchEffect：自动追踪依赖的副作用函数
• onMounted、onUpdated等生命周期钩子

二、响应式数据处理最佳实践

2.1 ref vs reactive的使用场景

在Vue 3中，ref和reactive是两种不同的响应式数据创建方式，理解它们的区别对于合理使用至关重要。

import { ref, reactive } from 'vue'

// 使用ref创建基本类型响应式数据
const count = ref(0)
console.log(count.value) // 0

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

// 复杂对象的处理
const user = ref({
  profile: {
    name: 'John',
    age: 25
  }
})

// 访问嵌套属性时需要注意
console.log(user.value.profile.name) // John

2.2 响应式数据的解构问题

import { ref, reactive } from 'vue'

// ❌ 错误做法：直接解构响应式数据
const count = ref(0)
const { value } = count // 这样会失去响应性

// ✅ 正确做法：使用.value访问
const count = ref(0)
console.log(count.value) // 正确访问方式

// 对于reactive对象
const state = reactive({ name: 'Vue' })
const { name } = state // 这样会失去响应性
const name = computed(() => state.name) // 正确做法

2.3 深度响应式与浅响应式

import { ref, reactive, shallowRef, triggerRef } from 'vue'

// 深度响应式（默认行为）
const deepState = reactive({
  user: {
    profile: {
      name: 'Vue'
    }
  }
})

// 浅响应式
const shallowState = shallowRef({
  user: {
    profile: {
      name: 'Vue'
    }
  }
})

// 需要手动触发更新
shallowState.value.user.profile.name = 'React'
triggerRef(shallowState) // 手动触发更新

三、组合函数设计模式

3.1 组合函数的核心思想

组合函数是Composition API中最重要的概念之一，它允许我们将可复用的逻辑封装成独立的函数。

// 用户数据获取组合函数
import { ref, onMounted } from 'vue'
import axios from 'axios'

export function useUserData(userId) {
  const user = ref(null)
  const loading = ref(false)
  const error = ref(null)

  const fetchUser = async () => {
    try {
      loading.value = true
      error.value = null
      const response = await axios.get(`/api/users/${userId}`)
      user.value = response.data
    } catch (err) {
      error.value = err.message
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    fetchUser()
  })

  return {
    user,
    loading,
    error,
    refresh: fetchUser
  }
}

// 在组件中使用
import { useUserData } from '@/composables/useUserData'

export default {
  setup() {
    const { user, loading, error, refresh } = useUserData(123)
    
    return {
      user,
      loading,
      error,
      refresh
    }
  }
}

3.2 复杂组合函数示例

// 表单验证组合函数
import { ref, reactive, computed } from 'vue'

export function useFormValidation(initialData = {}) {
  const formData = reactive({ ...initialData })
  const errors = ref({})
  const isValid = computed(() => Object.keys(errors.value).length === 0)

  const validateField = (fieldName, value, rules) => {
    if (!rules || rules.length === 0) return ''
    
    for (const rule of rules) {
      if (rule.required && !value) {
        return rule.message || `${fieldName} is required`
      }
      if (rule.minLength && value.length < rule.minLength) {
        return rule.message || `${fieldName} must be at least ${rule.minLength} characters`
      }
    }
    return ''
  }

  const validateForm = () => {
    const formErrors = {}
    
    for (const [key, value] of Object.entries(formData)) {
      const fieldRules = rules[key]
      if (fieldRules) {
        const error = validateField(key, value, fieldRules)
        if (error) {
          formErrors[key] = error
        }
      }
    }
    
    errors.value = formErrors
    return Object.keys(formErrors).length === 0
  }

  const setFieldValue = (field, value) => {
    formData[field] = value
    // 可选：实时验证
    if (rules[field]) {
      const error = validateField(field, value, rules[field])
      errors.value[field] = error
    }
  }

  return {
    formData,
    errors,
    isValid,
    validateForm,
    setFieldValue
  }
}

// 使用示例
export default {
  setup() {
    const { 
      formData, 
      errors, 
      isValid, 
      validateForm, 
      setFieldValue 
    } = useFormValidation({
      name: '',
      email: ''
    })

    // 定义验证规则
    const rules = {
      name: [
        { required: true, message: 'Name is required' },
        { minLength: 3, message: 'Name must be at least 3 characters' }
      ],
      email: [
        { required: true, message: 'Email is required' },
        { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: 'Invalid email format' }
      ]
    }

    const handleSubmit = () => {
      if (validateForm()) {
        console.log('Form submitted:', formData)
      }
    }

    return {
      formData,
      errors,
      isValid,
      handleSubmit,
      setFieldValue
    }
  }
}

3.3 组合函数的参数传递

// 带配置选项的组合函数
import { ref, watch } from 'vue'

export function useSearch(options = {}) {
  const searchQuery = ref('')
  const results = ref([])
  const loading = ref(false)
  const error = ref(null)

  const {
    debounceMs = 300,
    limit = 10,
    autoSearch = true
  } = options

  // 防抖搜索函数
  const debouncedSearch = debounce(async (query) => {
    if (!query.trim()) {
      results.value = []
      return
    }

    try {
      loading.value = true
      error.value = null
      
      const response = await fetch(`/api/search?q=${encodeURIComponent(query)}&limit=${limit}`)
      const data = await response.json()
      results.value = data.items
    } catch (err) {
      error.value = err.message
    } finally {
      loading.value = false
    }
  }, debounceMs)

  // 监听搜索查询变化
  watch(searchQuery, debouncedSearch)

  // 手动触发搜索
  const search = (query) => {
    searchQuery.value = query
    return debouncedSearch(query)
  }

  // 清除搜索结果
  const clear = () => {
    searchQuery.value = ''
    results.value = []
    error.value = null
  }

  return {
    searchQuery,
    results,
    loading,
    error,
    search,
    clear
  }
}

// 使用示例
export default {
  setup() {
    const { 
      searchQuery, 
      results, 
      loading, 
      error, 
      search, 
      clear 
    } = useSearch({
      debounceMs: 500,
      limit: 20,
      autoSearch: true
    })

    return {
      searchQuery,
      results,
      loading,
      error,
      search,
      clear
    }
  }
}

四、组件状态管理与生命周期

4.1 状态管理最佳实践

// 全局状态管理组合函数
import { ref, readonly } from 'vue'

export function useGlobalState() {
  const theme = ref('light')
  const language = ref('zh-CN')
  const userPreferences = ref({
    notifications: true,
    autoSave: false
  })

  const setTheme = (newTheme) => {
    theme.value = newTheme
    localStorage.setItem('theme', newTheme)
  }

  const setLanguage = (newLanguage) => {
    language.value = newLanguage
    localStorage.setItem('language', newLanguage)
  }

  const updateUserPreferences = (preferences) => {
    userPreferences.value = { ...userPreferences.value, ...preferences }
    localStorage.setItem('userPreferences', JSON.stringify(userPreferences.value))
  }

  // 从本地存储恢复状态
  const restoreState = () => {
    const savedTheme = localStorage.getItem('theme')
    const savedLanguage = localStorage.getItem('language')
    const savedPreferences = localStorage.getItem('userPreferences')

    if (savedTheme) theme.value = savedTheme
    if (savedLanguage) language.value = savedLanguage
    if (savedPreferences) userPreferences.value = JSON.parse(savedPreferences)
  }

  return {
    theme: readonly(theme),
    language: readonly(language),
    userPreferences: readonly(userPreferences),
    setTheme,
    setLanguage,
    updateUserPreferences,
    restoreState
  }
}

// 在应用入口使用
import { createApp } from 'vue'
import { useGlobalState } from '@/composables/useGlobalState'

const app = createApp(App)
const globalState = useGlobalState()

// 恢复状态
globalState.restoreState()

app.provide('globalState', globalState)

4.2 生命周期钩子的正确使用

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

export function useWindowResize() {
  const windowWidth = ref(window.innerWidth)
  const windowHeight = ref(window.innerHeight)

  const handleResize = () => {
    windowWidth.value = window.innerWidth
    windowHeight.value = window.innerHeight
  }

  // 监听窗口大小变化
  onMounted(() => {
    window.addEventListener('resize', handleResize)
  })

  // 清理事件监听器
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })

  return {
    windowWidth,
    windowHeight
  }
}

// 使用示例
export default {
  setup() {
    const { windowWidth, windowHeight } = useWindowResize()
    
    // 监听变化并执行副作用
    watch(windowWidth, (newWidth) => {
      console.log('Window width changed:', newWidth)
    })

    return {
      windowWidth,
      windowHeight
    }
  }
}

4.3 响应式数据监听与副作用处理

import { 
  watch, 
  watchEffect, 
  computed, 
  onMounted 
} from 'vue'

export function useDataSync(data) {
  const syncStatus = ref('idle')
  const lastSyncTime = ref(null)

  // 监听数据变化并同步到服务器
  const syncToServer = async (data) => {
    try {
      syncStatus.value = 'syncing'
      await fetch('/api/sync', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      })
      lastSyncTime.value = new Date()
      syncStatus.value = 'success'
    } catch (error) {
      syncStatus.value = 'error'
      console.error('Sync failed:', error)
    }
  }

  // 使用watchEffect自动追踪依赖
  watchEffect(() => {
    if (data.value) {
      syncToServer(data.value)
    }
  })

  // 手动触发同步
  const forceSync = () => {
    if (data.value) {
      syncToServer(data.value)
    }
  }

  return {
    syncStatus,
    lastSyncTime,
    forceSync
  }
}

// 使用示例
export default {
  setup() {
    const userData = ref({ name: 'John', age: 25 })
    const { syncStatus, lastSyncTime, forceSync } = useDataSync(userData)

    return {
      userData,
      syncStatus,
      lastSyncTime,
      forceSync
    }
  }
}

五、组件复用与逻辑抽象

5.1 高阶组件模式

// 创建一个通用的数据加载组件
import { ref, watch } from 'vue'

export function withDataLoader(loaderFunction) {
  return {
    setup(props, { slots }) {
      const data = ref(null)
      const loading = ref(false)
      const error = ref(null)

      const loadData = async () => {
        try {
          loading.value = true
          error.value = null
          data.value = await loaderFunction(props)
        } catch (err) {
          error.value = err.message
        } finally {
          loading.value = false
        }
      }

      watch(() => props.refreshKey, loadData, { immediate: true })

      return () => h('div', [
        slots.default?.({
          data: data.value,
          loading: loading.value,
          error: error.value,
          reload: loadData
        })
      ])
    }
  }
}

// 使用高阶组件
const UserList = withDataLoader(async (props) => {
  const response = await fetch(`/api/users?page=${props.page}`)
  return response.json()
})

export default {
  components: { UserList },
  setup() {
    const page = ref(1)
    
    return {
      page
    }
  }
}

5.2 可复用的UI组件组合函数

// 抽象可复用的UI交互逻辑
import { ref, computed } from 'vue'

export function usePagination(totalItems, options = {}) {
  const currentPage = ref(options.initialPage || 1)
  const pageSize = ref(options.pageSize || 10)
  const totalPage = computed(() => Math.ceil(totalItems / pageSize.value))

  const goToPage = (page) => {
    if (page >= 1 && page <= totalPage.value) {
      currentPage.value = page
    }
  }

  const nextPage = () => {
    if (currentPage.value < totalPage.value) {
      currentPage.value++
    }
  }

  const prevPage = () => {
    if (currentPage.value > 1) {
      currentPage.value--
    }
  }

  const isFirstPage = computed(() => currentPage.value === 1)
  const isLastPage = computed(() => currentPage.value === totalPage.value)

  const pages = computed(() => {
    const pagesArray = []
    const maxVisiblePages = options.maxVisiblePages || 5
    let startPage = Math.max(1, currentPage.value - Math.floor(maxVisiblePages / 2))
    let endPage = Math.min(totalPage.value, startPage + maxVisiblePages - 1)

    if (endPage - startPage + 1 < maxVisiblePages) {
      startPage = Math.max(1, endPage - maxVisiblePages + 1)
    }

    for (let i = startPage; i <= endPage; i++) {
      pagesArray.push(i)
    }

    return pagesArray
  })

  return {
    currentPage,
    pageSize,
    totalPage,
    isFirstPage,
    isLastPage,
    pages,
    goToPage,
    nextPage,
    prevPage,
    setPageSize: (size) => {
      pageSize.value = size
      currentPage.value = 1 // 重置到第一页
    }
  }
}

// 使用示例
export default {
  setup() {
    const totalItems = ref(100)
    const { 
      currentPage, 
      totalPage, 
      pages, 
      goToPage, 
      nextPage, 
      prevPage,
      setPageSize 
    } = usePagination(totalItems, {
      initialPage: 1,
      pageSize: 10,
      maxVisiblePages: 7
    })

    return {
      currentPage,
      totalPage,
      pages,
      goToPage,
      nextPage,
      prevPage,
      setPageSize
    }
  }
}

5.3 数据处理与转换组合函数

// 处理复杂数据转换的组合函数
import { ref, computed } from 'vue'

export function useDataProcessor(data, processors = []) {
  const processedData = ref(data)
  const processingStatus = ref('idle')

  const process = async (dataToProcess) => {
    try {
      processingStatus.value = 'processing'
      
      let result = dataToProcess
      
      for (const processor of processors) {
        if (typeof processor === 'function') {
          result = await processor(result)
        } else if (processor.async) {
          result = await processor.transform(result)
        } else {
          result = processor.transform(result)
        }
      }
      
      processedData.value = result
      processingStatus.value = 'success'
    } catch (error) {
      processingStatus.value = 'error'
      console.error('Processing failed:', error)
    }
  }

  const addProcessor = (processor) => {
    processors.push(processor)
  }

  const clearProcessors = () => {
    processors.length = 0
  }

  // 计算属性：提供处理后的数据
  const dataWithProcessors = computed(() => {
    return processedData.value
  })

  // 预处理数据
  if (data) {
    process(data)
  }

  return {
    data: dataWithProcessors,
    status: processingStatus,
    process,
    addProcessor,
    clearProcessors
  }
}

// 使用示例
const dataProcessor = useDataProcessor(
  originalData,
  [
    // 同步处理器
    (data) => data.map(item => ({ ...item, processed: true })),
    
    // 异步处理器
    {
      async: true,
      transform: async (data) => {
        const promises = data.map(async item => {
          const response = await fetch(`/api/enrich/${item.id}`)
          const enriched = await response.json()
          return { ...item, ...enriched }
        })
        return Promise.all(promises)
      }
    },
    
    // 复杂转换
    (data) => data.filter(item => item.status === 'active')
  ]
)

export default {
  setup() {
    const { data, status, process } = dataProcessor
    
    return {
      data,
      status,
      process
    }
  }
}

六、性能优化策略

6.1 避免不必要的响应式依赖

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

// ❌ 不好的做法：过度依赖响应式
export function badExample() {
  const data = ref({ items: [], total: 0 })
  
  // 每次data变化都会触发计算
  const expensiveCalculation = computed(() => {
    return data.value.items.reduce((sum, item) => sum + item.value, 0)
  })

  return { expensiveCalculation }
}

// ✅ 好的做法：合理使用响应式
export function goodExample() {
  const items = ref([])
  const total = ref(0)
  
  // 只在items变化时重新计算
  const expensiveCalculation = computed(() => {
    return items.value.reduce((sum, item) => sum + item.value, 0)
  })

  // 如果需要整体更新，使用watch而不是computed
  const updateData = (newItems, newTotal) => {
    items.value = newItems
    total.value = newTotal
  }

  return { expensiveCalculation, updateData }
}

6.2 计算属性的合理使用

import { computed } from 'vue'

export function useOptimizedComputed() {
  const users = ref([])
  const filter = ref('')
  const sortField = ref('name')
  const sortOrder = ref('asc')

  // ✅ 使用计算属性缓存复杂计算
  const filteredUsers = computed(() => {
    return users.value.filter(user => 
      user.name.toLowerCase().includes(filter.value.toLowerCase())
    )
  })

  const sortedUsers = computed(() => {
    return [...filteredUsers.value].sort((a, b) => {
      const aValue = a[sortField.value]
      const bValue = b[sortField.value]
      
      if (sortOrder.value === 'asc') {
        return aValue > bValue ? 1 : -1
      } else {
        return aValue < bValue ? 1 : -1
      }
    })
  })

  // ✅ 避免在计算属性中执行副作用
  const computedUsers = computed(() => {
    // 只做计算，不执行副作用
    return sortedUsers.value.map(user => ({
      ...user,
      displayName: `${user.firstName} ${user.lastName}`
    }))
  })

  return { computedUsers }
}

6.3 组件性能监控

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

export function usePerformanceMonitor(componentName) {
  const startTime = ref(0)
  const endTime = ref(0)
  const executionTime = ref(0)

  const startMonitoring = () => {
    startTime.value = performance.now()
  }

  const stopMonitoring = () => {
    endTime.value = performance.now()
    executionTime.value = endTime.value - startTime.value
  }

  const logPerformance = () => {
    console.log(`${componentName} execution time: ${executionTime.value.toFixed(2)}ms`)
  }

  // 自动监控组件生命周期
  onMounted(() => {
    startMonitoring()
  })

  onUnmounted(() => {
    stopMonitoring()
    logPerformance()
  })

  return {
    startMonitoring,
    stopMonitoring,
    executionTime
  }
}

// 使用示例
export default {
  setup() {
    const { startMonitoring, stopMonitoring, executionTime } = usePerformanceMonitor('UserList')

    // 在需要的地方调用
    startMonitoring()
    
    // 组件逻辑...
    
    stopMonitoring()

    return {
      executionTime
    }
  }
}

七、TypeScript与Composition API集成

7.1 类型安全的组合函数

import { ref, Ref } from 'vue'

// 定义类型接口
interface User {
  id: number
  name: string
  email: string
}

interface UseUserStateReturn {
  user: Ref<User | null>
  loading: Ref<boolean>
  error: Ref<string | null>
  fetchUser: (id: number) => Promise<void>
  refresh: () => Promise<void>
}

// 类型安全的组合函数
export function useUserState(): UseUserStateReturn {
  const user = ref<User | null>(null)
  const loading = ref(false)
  const error = ref<string | null>(null)

  const fetchUser = async (id: number): Promise<void> => {
    try {
      loading.value = true
      error.value = null
      
      const response = await fetch(`/api/users/${id}`)
      if (!response.ok) {
        throw new Error(`Failed to fetch user: ${response.status}`)
      }
      
      const userData: User = await response.json()
      user.value = userData
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Unknown error'
    } finally {
      loading.value = false
    }
  }

  const refresh = async (): Promise<void> => {
    if (user.value) {
      await fetchUser(user.value.id)
    }
  }

  return {
    user,
    loading,
    error,
    fetchUser,
    refresh
  }
}

7.2 泛型组合函数

import { ref, Ref } from 'vue'

// 泛型组合函数示例
interface ApiResponse<T> {
  data: T
  status: number
  message?: string
}

export function useApi<T>(url: string): {
  data: Ref<T | null>
  loading: Ref<boolean>
  error: Ref<string | null>
  fetchData: () => Promise<void>
} {
  const data = ref<T | null>(null)
  const loading = ref(false)
  const error = ref<string | null>(null)

  const fetchData = async (): Promise<void> => {
    try {
      loading.value = true
      error.value = null
      
      const response = await fetch(url)
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      
      const result: ApiResponse<T> = await response.json()
      data.value = result.data
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Unknown error'
    } finally {
      loading.value = false
    }
  }

  return {
    data,
    loading,
    error,
    fetchData
  }
}

// 使用示例
const { data, loading, error, fetchData } = useApi<User[]>('/api/users')

八、实际项目中的应用案例

8.1 复杂表单管理

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

export function useFormManager(initialFormState = {}) {
  const formState = reactive({ ...initialFormState })
  const errors = ref({})
  const isSubmitting = ref(false)
  const isValidating = ref(false)

  // 表单验证规则
  const validationRules = ref({
    email: [
      { required: true, message: 'Email is required' },
      { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: 'Invalid email format' }
    ],
    password: [
      { required: true, message: 'Password is required' },
      { minLength: 8, message: 'Password must be at least 8 characters' }
    ]