Vue 3 Composition API 最佳实践：从项目实战中汲取的经验Vue 3 Composition API

Vue 3 Composition API 最佳实践：从项目实战中汲取的经验

前言

随着 Vue 3 的发布，Composition API（组合式 API）已成为现代 Vue 开发的核心特性。它提供了更好的代码组织、可复用性和类型推断支持。然而，在实际项目中，许多开发者仍面临如何高效使用 Composition API 的挑战。本文基于我在市场监督 Vue 项目中的实战经验，分享一些 Composition API 的最佳实践，帮助你避免常见坑点，提升代码质量。

Composition API 基础回顾

Composition API 允许我们将组件的逻辑按功能分组，而不是按选项分组。核心函数包括 ref、reactive、computed、watch 等。与 Options API 相比，它更灵活，适合大型应用。

// 基础示例
import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    
    return { count, doubleCount }
  }
}

最佳实践 1：逻辑复用与 composables

在项目中，我们经常需要复用逻辑，如数据获取、表单验证。Composition API 通过 composables（组合函数）实现这一点。

实践建议：

将可复用逻辑提取到独立的 composables 文件中。
使用 use 前缀命名，如 useFetchData。
避免在 composables 中直接操作 DOM，确保纯逻辑。

// composables/useFetchData.js
import { ref, onMounted } from 'vue'
import axios from 'axios'

export function useFetchData(url) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)

  const fetchData = async () => {
    loading.value = true
    try {
      const response = await axios.get(url)
      data.value = response.data
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  }

  onMounted(fetchData)

  return { data, loading, error, refetch: fetchData }
}

在组件中使用：

// components/DataList.vue
import { useFetchData } from '@/composables/useFetchData'

export default {
  setup() {
    const { data, loading, error } = useFetchData('/api/data')
    return { data, loading, error }
  }
}

经验分享： 在市场监督项目中，我们将 API 调用逻辑抽象为 composables，大大减少了重复代码。记得处理错误边界，避免 composables 耦合过多。

最佳实践 2：响应式数据管理

响应式是 Vue 的核心。Composition API 提供了 ref 和 reactive，选择取决于数据结构。

实践建议：

对于基本类型使用 ref，对象使用 reactive。
避免深层嵌套响应式对象，使用 shallowRef 或 shallowReactive 优化性能。
使用 toRefs 将 reactive 对象解构为 ref，避免丢失响应性。

import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      user: { name: 'John', age: 30 },
      settings: { theme: 'dark' }
    })

    // 正确解构
    return { ...toRefs(state) }
  }
}

坑点提醒： 直接解构 reactive 对象会丢失响应性。项目中曾因忘记 toRefs 导致数据不更新，调试了半天。

最佳实践 3：生命周期与副作用处理

Composition API 使用 onMounted、onUnmounted 等钩子管理生命周期。

实践建议：

将副作用逻辑（如定时器、事件监听）封装在 composables 中。
使用 onBeforeUnmount 清理资源，防止内存泄漏。
对于异步操作，使用 watchEffect 或 watch 监听依赖。

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

export function useInterval(callback, delay) {
  const intervalId = ref(null)

  onMounted(() => {
    intervalId.value = setInterval(callback, delay)
  })

  onUnmounted(() => {
    if (intervalId.value) {
      clearInterval(intervalId.value)
    }
  })

  return { intervalId }
}

经验分享： 在实时监控页面，我们用这个 composable 管理数据轮询。记得在组件销毁时清理，避免后台运行。

最佳实践 4：类型安全与 TypeScript 集成

TypeScript 与 Composition API 完美配合，提供更好的开发体验。

实践建议：

为 composables 定义接口。
使用 Ref<T> 和 ComputedRef<T> 类型。
利用 Vue 3 的类型推断，减少显式类型声明。

import { ref, computed, type Ref } from 'vue'

interface User {
  id: number
  name: string
}

export function useUser(): { user: Ref<User | null>, isLoggedIn: ComputedRef<boolean> } {
  const user = ref<User | null>(null)
  const isLoggedIn = computed(() => !!user.value)

  return { user, isLoggedIn }
}

经验分享： 项目中引入 TypeScript 后，IDE 提示更准确，减少了运行时错误。建议从核心 composables 开始逐步迁移。

性能优化技巧

使用 shallowRef 和 shallowReactive：对于大型对象，避免深层响应式。
合理使用 computed：缓存计算结果，避免重复计算。
拆分大型组件：将逻辑拆分为多个 composables，减少单个 setup 函数的复杂度。
使用 nextTick：在 DOM 更新后执行逻辑。

import { nextTick } from 'vue'

// 示例：等待 DOM 更新后聚焦输入框
await nextTick()
inputRef.value.focus()

总结

Composition API 让 Vue 开发更现代化，但需要良好的架构思维。通过 composables 复用逻辑、正确管理响应式和生命周期，我们可以写出更可维护的代码。在市场监督项目中，这些实践帮助我们从 2.x 顺利迁移到 3.x，提升了开发效率。

希望这篇文章对你有帮助！如果你有其他 Vue 3 经验，欢迎在评论区分享。代码示例可在 GitHub 上找到完整项目。

Vue 3 Composition API 最佳实践：从项目实战中汲取的经验