登录 注册

Vue 3 Composition API最佳实践：响应式编程与组件复用的高级技巧

Chris690
Chris690 2026-02-02T01:01:35+08:00
0 0 1

引言

Vue 3 的发布带来了革命性的变化，其中最引人注目的就是 Composition API 的引入。相比于 Vue 2 中的 Options API，Composition API 提供了更灵活、更强大的组件逻辑组织方式，特别是在处理复杂组件和跨组件逻辑复用方面表现出色。本文将深入探讨 Vue 3 Composition API 的核心概念，并分享响应式数据管理、组合函数复用、生命周期钩子使用等高级技巧。

Composition API 核心概念

什么是 Composition API

Composition API 是 Vue 3 中引入的一种新的组件逻辑组织方式，它允许开发者以函数的形式组织和复用组件逻辑。与传统的 Options API 相比，Composition API 更加灵活，能够更好地处理复杂的组件逻辑和跨组件的逻辑复用。

在传统的 Options API 中，组件逻辑按照属性、方法、计算属性等进行分组，这在处理复杂组件时容易导致代码分散和维护困难。而 Composition API 允许开发者将相关的逻辑组合在一起，形成更清晰的代码结构。

响应式系统的核心

Vue 3 的响应式系统基于 Proxy 和 Reflect 实现，为开发者提供了更加直观和强大的响应式编程体验。理解响应式系统的原理对于掌握 Composition API 至关重要。

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

// Refs: 基本类型响应式
const count = ref(0)
console.log(count.value) // 0

// Reactives: 对象类型响应式
const state = reactive({
  name: 'Vue',
  version: 3
})

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

响应式数据管理最佳实践

Ref vs Reactive 的选择策略

在 Vue 3 中，开发者需要根据不同的数据类型和使用场景选择合适的响应式 API。

Ref 适用于：

  • 基本数据类型（number, string, boolean）
  • 需要单独访问的简单值
  • 需要在模板中直接使用的值
import { ref } from 'vue'

export default {
  setup() {
    // 基本类型使用 ref
    const count = ref(0)
    const message = ref('Hello Vue')
    const isActive = ref(false)
    
    const increment = () => {
      count.value++
    }
    
    return {
      count,
      message,
      isActive,
      increment
    }
  }
}

Reactive 适用于：

  • 复杂对象结构
  • 需要批量更新的对象属性
  • 对象的深层嵌套结构
import { reactive } from 'vue'

export default {
  setup() {
    // 复杂对象使用 reactive
    const user = reactive({
      profile: {
        name: 'John',
        age: 30,
        address: {
          city: 'New York',
          country: 'USA'
        }
      },
      preferences: {
        theme: 'dark',
        notifications: true
      }
    })
    
    const updateUserProfile = (newProfile) => {
      user.profile = { ...user.profile, ...newProfile }
    }
    
    return {
      user,
      updateUserProfile
    }
  }
}

响应式数据的深层管理

对于复杂的嵌套对象，需要特别注意响应式的处理方式：

import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      user: {
        profile: {
          name: 'Alice',
          details: {
            email: 'alice@example.com',
            phone: '123-456-7890'
          }
        }
      },
      settings: {
        theme: 'light',
        language: 'en'
      }
    })
    
    // 使用 toRefs 解构响应式对象
    const { user, settings } = toRefs(state)
    
    // 深层更新方法
    const updateEmail = (newEmail) => {
      state.user.profile.details.email = newEmail
    }
    
    return {
      user,
      settings,
      updateEmail
    }
  }
}

响应式数据的性能优化

在处理大量响应式数据时，需要考虑性能优化：

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

export default {
  setup() {
    const largeArray = ref([])
    
    // 使用计算属性缓存复杂计算结果
    const processedData = computed(() => {
      return largeArray.value
        .filter(item => item.active)
        .map(item => ({
          ...item,
          processed: true
        }))
    })
    
    // 监听特定变化，避免不必要的重渲染
    watch(processedData, (newData) => {
      console.log('数据已更新:', newData.length)
    })
    
    return {
      largeArray,
      processedData
    }
  }
}

组合函数复用的高级技巧

创建可复用的组合函数

组合函数是 Composition API 的核心优势之一，它允许开发者将逻辑封装成可复用的函数：

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

export function useLocalStorage(key, defaultValue) {
  const value = ref(defaultValue)
  
  // 从 localStorage 初始化值
  try {
    const stored = localStorage.getItem(key)
    if (stored) {
      value.value = JSON.parse(stored)
    }
  } catch (error) {
    console.error(`Failed to load ${key} from localStorage`, error)
  }
  
  // 监听值变化并保存到 localStorage
  watch(value, (newValue) => {
    try {
      localStorage.setItem(key, JSON.stringify(newValue))
    } catch (error) {
      console.error(`Failed to save ${key} to localStorage`, error)
    }
  }, { deep: true })
  
  return value
}

复合组合函数的实现

更复杂的场景下，可以创建复合的组合函数：

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

export function useApi(url) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)
  
  // 响应式状态对象
  const state = reactive({
    isLoading: false,
    hasError: false,
    isEmpty: false
  })
  
  const fetch = 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()
      state.isEmpty = !data.value || Object.keys(data.value).length === 0
    } catch (err) {
      error.value = err
      state.hasError = true
    } finally {
      loading.value = false
      state.isLoading = false
    }
  }
  
  const refresh = () => {
    fetch()
  }
  
  // 计算属性
  const isEmpty = computed(() => !data.value || Object.keys(data.value).length === 0)
  
  return {
    data,
    loading,
    error,
    state,
    fetch,
    refresh,
    isEmpty
  }
}

组合函数的参数化和配置

高级组合函数应该支持灵活的参数化：

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

export function usePagination(apiCall, options = {}) {
  const {
    pageSize = 10,
    page = 1,
    autoFetch = true,
    debounceMs = 300
  } = options
  
  const currentPage = ref(page)
  const currentPageSize = ref(pageSize)
  const loading = ref(false)
  const data = ref([])
  const total = ref(0)
  const totalPages = computed(() => Math.ceil(total.value / currentPageSize.value))
  
  let debounceTimer = null
  
  const fetchPage = async (pageNum = currentPage.value) => {
    if (loading.value) return
    
    loading.value = true
    try {
      const result = await apiCall({
        page: pageNum,
        pageSize: currentPageSize.value
      })
      
      data.value = result.data || result
      total.value = result.total || result.length || 0
      
      // 更新当前页码
      currentPage.value = pageNum
    } catch (error) {
      console.error('Pagination fetch error:', error)
    } finally {
      loading.value = false
    }
  }
  
  const nextPage = () => {
    if (currentPage.value < totalPages.value) {
      fetchPage(currentPage.value + 1)
    }
  }
  
  const prevPage = () => {
    if (currentPage.value > 1) {
      fetchPage(currentPage.value - 1)
    }
  }
  
  const goToPage = (pageNum) => {
    if (pageNum >= 1 && pageNum <= totalPages.value) {
      fetchPage(pageNum)
    }
  }
  
  // 自动获取数据
  if (autoFetch) {
    fetchPage()
  }
  
  return {
    currentPage,
    currentPageSize,
    data,
    total,
    totalPages,
    loading,
    fetchPage,
    nextPage,
    prevPage,
    goToPage
  }
}

生命周期钩子的高级使用

setup 函数中的生命周期管理

在 setup 中，我们可以通过 onMounted、onUpdated 等钩子来处理组件生命周期：

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

export default {
  setup() {
    const count = ref(0)
    const timer = ref(null)
    
    // 组件挂载时的处理
    onMounted(() => {
      console.log('组件已挂载')
      
      // 开启定时器
      timer.value = setInterval(() => {
        count.value++
      }, 1000)
      
      // 添加事件监听器
      window.addEventListener('resize', handleResize)
    })
    
    // 组件更新时的处理
    onUpdated(() => {
      console.log('组件已更新')
      console.log('当前计数:', count.value)
    })
    
    // 组件卸载前的清理工作
    onUnmounted(() => {
      console.log('组件即将卸载')
      
      // 清理定时器
      if (timer.value) {
        clearInterval(timer.value)
      }
      
      // 移除事件监听器
      window.removeEventListener('resize', handleResize)
    })
    
    const handleResize = () => {
      console.log('窗口大小改变')
    }
    
    return {
      count
    }
  }
}

异步生命周期处理

处理异步操作时的生命周期管理：

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

export default {
  setup() {
    const data = ref(null)
    const loading = ref(false)
    const error = ref(null)
    
    // 用于取消异步请求的标识符
    let isCancelled = false
    
    onMounted(async () => {
      loading.value = true
      
      try {
        // 模拟异步数据获取
        const response = await fetch('/api/data')
        const result = await response.json()
        
        // 检查组件是否仍然存在
        if (!isCancelled) {
          data.value = result
        }
      } catch (err) {
        if (!isCancelled) {
          error.value = err.message
        }
      } finally {
        if (!isCancelled) {
          loading.value = false
        }
      }
    })
    
    onUnmounted(() => {
      // 标记组件已卸载，取消所有异步操作
      isCancelled = true
    })
    
    return {
      data,
      loading,
      error
    }
  }
}

带参数的生命周期钩子

在某些场景下，可能需要为不同的条件执行不同的生命周期逻辑：

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

export default {
  setup(props) {
    const isServer = ref(false)
    const data = ref(null)
    
    // 根据 props 的变化动态处理生命周期
    watch(() => props.id, async (newId, oldId) => {
      if (newId !== oldId) {
        await fetchData(newId)
      }
    })
    
    const fetchData = async (id) => {
      if (!id) return
      
      try {
        // 检查是否为服务端渲染
        if (typeof window === 'undefined') {
          isServer.value = true
          return
        }
        
        const response = await fetch(`/api/data/${id}`)
        data.value = await response.json()
      } catch (error) {
        console.error('数据获取失败:', error)
      }
    }
    
    onMounted(async () => {
      if (props.id) {
        await fetchData(props.id)
      }
    })
    
    return {
      data,
      isServer
    }
  }
}

组件复用的最佳实践

高阶组件模式

通过组合函数实现类似高阶组件的功能：

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

export function useForm(initialData = {}) {
  const form = reactive({ ...initialData })
  const errors = ref({})
  const isSubmitting = ref(false)
  
  const validate = (rules) => {
    const newErrors = {}
    
    Object.keys(rules).forEach(field => {
      const rule = rules[field]
      const value = form[field]
      
      if (rule.required && !value) {
        newErrors[field] = `${field} 是必填项`
      }
      
      if (rule.minLength && value.length < rule.minLength) {
        newErrors[field] = `${field} 长度不能少于 ${rule.minLength} 位`
      }
      
      if (rule.pattern && !rule.pattern.test(value)) {
        newErrors[field] = `${field} 格式不正确`
      }
    })
    
    errors.value = newErrors
    return Object.keys(newErrors).length === 0
  }
  
  const reset = () => {
    Object.keys(form).forEach(key => {
      form[key] = ''
    })
    errors.value = {}
  }
  
  const submit = async (submitHandler) => {
    if (!validate()) return false
    
    isSubmitting.value = true
    
    try {
      await submitHandler(form)
      return true
    } catch (error) {
      console.error('提交失败:', error)
      return false
    } finally {
      isSubmitting.value = false
    }
  }
  
  return {
    form,
    errors,
    isSubmitting,
    validate,
    reset,
    submit
  }
}

混合模式的实现

在组件中使用多个组合函数来实现复杂的逻辑：

<template>
  <div class="user-profile">
    <div v-if="loading">加载中...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else>
      <h2>{{ user.name }}</h2>
      <p>邮箱: {{ user.email }}</p>
      <p>注册时间: {{ formatDate(user.createdAt) }}</p>
      <button @click="refresh">刷新</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useApi } from '@/composables/useApi'
import { useLocalStorage } from '@/composables/useLocalStorage'

export default {
  name: 'UserProfile',
  props: {
    userId: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 使用 API 组合函数获取用户数据
    const { data, loading, error, fetch, refresh } = useApi(`/api/users/${props.userId}`)
    
    // 使用本地存储组合函数
    const lastAccessed = useLocalStorage('lastUserAccess', Date.now())
    
    const formatDate = (dateString) => {
      return new Date(dateString).toLocaleDateString()
    }
    
    // 更新访问时间戳
    if (data.value) {
      lastAccessed.value = Date.now()
    }
    
    return {
      user: data,
      loading,
      error,
      refresh,
      formatDate
    }
  }
}
</script>

状态管理组合函数

创建跨组件共享状态的组合函数：

// composables/useGlobalState.js
import { reactive, readonly } from 'vue'

// 全局状态存储
const globalState = reactive({
  user: null,
  theme: 'light',
  language: 'zh-CN'
})

// 提供状态访问方法
export function useGlobalState() {
  const getState = () => readonly(globalState)
  
  const setUser = (user) => {
    globalState.user = user
  }
  
  const setTheme = (theme) => {
    globalState.theme = theme
  }
  
  const setLanguage = (language) => {
    globalState.language = language
  }
  
  return {
    state: getState(),
    setUser,
    setTheme,
    setLanguage
  }
}

实际项目案例分析

电商商品列表组件

让我们通过一个实际的电商商品列表组件来展示如何综合运用这些技巧：

<template>
  <div class="product-list">
    <div class="controls">
      <input v-model="searchQuery" placeholder="搜索商品..." />
      <select v-model="selectedCategory">
        <option value="">所有分类</option>
        <option v-for="category in categories" :key="category.id" :value="category.id">
          {{ category.name }}
        </option>
      </select>
      <button @click="clearFilters">清除筛选</button>
    </div>
    
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else>
      <div class="product-grid">
        <ProductCard
          v-for="product in products"
          :key="product.id"
          :product="product"
          @favorite="toggleFavorite"
        />
      </div>
      
      <Pagination
        :current-page="currentPage"
        :total-pages="totalPages"
        @page-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { useApi } from '@/composables/useApi'
import { usePagination } from '@/composables/usePagination'
import ProductCard from './ProductCard.vue'
import Pagination from './Pagination.vue'

export default {
  name: 'ProductList',
  components: {
    ProductCard,
    Pagination
  },
  setup() {
    // 搜索查询参数
    const searchQuery = ref('')
    const selectedCategory = ref('')
    
    // 使用 API 组合函数获取数据
    const { data, loading, error, fetch } = useApi('/api/products')
    
    // 使用分页组合函数
    const pagination = usePagination(
      (params) => {
        const queryParams = new URLSearchParams({
          page: params.page,
          pageSize: params.pageSize,
          search: searchQuery.value,
          category: selectedCategory.value
        })
        
        return fetch(`/api/products?${queryParams}`)
      },
      { pageSize: 12 }
    )
    
    // 计算属性
    const products = computed(() => pagination.data.value || [])
    const categories = computed(() => {
      if (!data.value) return []
      return [...new Set(data.value.map(p => p.category))]
    })
    
    const totalPages = computed(() => pagination.totalPages.value)
    
    // 筛选器变化时重新获取数据
    watch([searchQuery, selectedCategory], () => {
      pagination.fetchPage(1)
    })
    
    // 清除筛选器
    const clearFilters = () => {
      searchQuery.value = ''
      selectedCategory.value = ''
    }
    
    // 处理分页变化
    const handlePageChange = (page) => {
      pagination.goToPage(page)
    }
    
    // 切换收藏
    const toggleFavorite = async (productId) => {
      try {
        await fetch(`/api/products/${productId}/favorite`, {
          method: 'POST'
        })
        
        // 更新本地数据
        const productIndex = products.value.findIndex(p => p.id === productId)
        if (productIndex !== -1) {
          products.value[productIndex].isFavorite = !products.value[productIndex].isFavorite
        }
      } catch (error) {
        console.error('切换收藏失败:', error)
      }
    }
    
    return {
      searchQuery,
      selectedCategory,
      loading,
      error,
      products,
      categories,
      currentPage: pagination.currentPage,
      totalPages,
      clearFilters,
      handlePageChange,
      toggleFavorite
    }
  }
}
</script>

<style scoped>
.product-list {
  padding: 20px;
}

.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
</style>

实时数据更新组件

另一个实际应用是实时数据更新的场景：

<template>
  <div class="realtime-dashboard">
    <h2>实时数据监控</h2>
    
    <div class="metrics">
      <div class="metric-card" v-for="metric in metrics" :key="metric.id">
        <h3>{{ metric.name }}</h3>
        <p class="value">{{ formatValue(metric.value) }}</p>
        <p class="status" :class="getStatusClass(metric.status)">
          {{ getStatusText(metric.status) }}
        </p>
      </div>
    </div>
    
    <div class="controls">
      <button @click="startMonitoring">开始监控</button>
      <button @click="stopMonitoring">停止监控</button>
      <button @click="refreshData">刷新数据</button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { useApi } from '@/composables/useApi'

export default {
  name: 'RealtimeDashboard',
  setup() {
    const metrics = ref([])
    const monitoringInterval = ref(null)
    const isMonitoring = ref(false)
    
    // 使用 API 组合函数获取实时数据
    const { data, loading, error, fetch } = useApi('/api/realtime/metrics')
    
    // 格式化数值显示
    const formatValue = (value) => {
      if (typeof value === 'number') {
        return value.toLocaleString()
      }
      return value
    }
    
    // 获取状态样式类
    const getStatusClass = (status) => {
      switch (status) {
        case 'normal': return 'status-normal'
        case 'warning': return 'status-warning'
        case 'error': return 'status-error'
        default: return ''
      }
    }
    
    // 获取状态文本
    const getStatusText = (status) => {
      switch (status) {
        case 'normal': return '正常'
        case 'warning': return '警告'
        case 'error': return '错误'
        default: return '未知'
      }
    }
    
    // 开始监控
    const startMonitoring = () => {
      if (!isMonitoring.value) {
        isMonitoring.value = true
        monitoringInterval.value = setInterval(() => {
          fetch()
        }, 5000) // 每5秒更新一次
        
        console.log('开始实时监控')
      }
    }
    
    // 停止监控
    const stopMonitoring = () => {
      if (isMonitoring.value) {
        isMonitoring.value = false
        clearInterval(monitoringInterval.value)
        monitoringInterval.value = null
        console.log('停止实时监控')
      }
    }
    
    // 刷新数据
    const refreshData = () => {
      fetch()
    }
    
    // 监听数据变化并更新
    onMounted(() => {
      fetch()
      startMonitoring()
    })
    
    // 组件卸载时清理资源
    onUnmounted(() => {
      stopMonitoring()
    })
    
    return {
      metrics: data,
      loading,
      error,
      formatValue,
      getStatusClass,
      getStatusText,
      startMonitoring,
      stopMonitoring,
      refreshData
    }
  }
}
</script>

<style scoped>
.realtime-dashboard {
  padding: 20px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.metric-card {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
}

.value {
  font-size: 1.5em;
  font-weight: bold;
  margin: 10px 0;
}

.status-normal {
  color: #4caf50;
}

.status-warning {
  color: #ff9800;
}

.status-error {
  color: #f44336;
}

.controls {
  display: flex;
  gap: 10px;
}
</style>

性能优化策略

响应式数据的懒加载

对于大型数据集，可以采用懒加载策略：

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

export function useLazyData(initialData = []) {
  const data = ref(initialData)
  const loading = ref(false)
  const loadedItems = ref(0)
  
  const displayedItems = computed(() => {
    return data.value.slice(0, loadedItems.value)
  })
  
  const loadMore = () => {
    if (loadedItems.value < data.value.length) {
      loadedItems.value += 10
    }
  }
  
  const reset = () => {
    loadedItems.value = 0
  }
  
  return {
    data,
    loading,
    displayedItems,
    loadMore,
    reset
  }
}

组件级别的优化

使用 memo 和 computed 来避免不必要的计算：

import { computed, watch } from 'vue'

export function useOptimizedComponent(props) {
  // 使用 computed 缓存复杂计算
  const expensiveComputed = computed(() => {
    // 复杂的计算逻辑
    return props.items.map(item => ({
      ...item,
      processed: processItem(item)
    }))
  })
  
  // 只在特定依赖变化时才执行
  const filteredItems = computed(() => {
    return expensiveComputed.value.filter(item => 
      item.name.toLowerCase().includes(props.searchQuery.toLowerCase())
    )
  })
  
  // 防抖处理
  let debounceTimer = null
  const debouncedSearch = (query) => {
    clearTimeout(debounceTimer)
    debounceTimer = setTimeout(() => {
      props.searchQuery = query
    }, 300)
  }
  
  return {
    filteredItems,
    debouncedSearch
  }
}

最佳实践总结

代码组织原则

  1. 逻辑分组：将相关的响应式数据和方法组织在一起
  2. 单一职责：每个组合函数应该只负责一个特定的功能
  3. 可复用性：设计组合函数时考虑通用性和灵活性 4
# VUE # 3 # Composition
相关推荐
广告位招租

相似文章

    评论 (0)

    0/2000