Vue3组合式API深度解析：十大核心函数精讲

一、响应式系统核心：ref与reactive

1. ref：创建响应式引用

ref是Vue3响应式系统的基石，通过RefImpl类包装基本类型值，使其具备响应性。其核心特性包括：

import { ref } from 'vue'
const count = ref(0) // { value: 0 }
console.log(count.value) // 访问值需通过.value

应用场景：表单输入绑定、计算属性依赖、组件间通信。建议将ref用于基本类型值，避免直接修改.value属性以外的属性。

2. reactive：创建响应式对象

reactive通过Proxy实现深度响应式，适用于对象类型：

const state = reactive({ 
  name: 'Vue3',
  version: 3.4
})
// 无需.value，直接修改属性
state.version = 3.5

性能优化：当对象嵌套层级过深时，建议拆分为多个reactive对象。注意避免解构导致响应性丢失：

// 错误示范：解构后失去响应性
const { name } = state 
// 正确做法：使用toRefs保持响应性
import { toRefs } from 'vue'
const { name } = toRefs(state)

二、生命周期控制：onMounted与onUnmounted

3. onMounted：组件挂载钩子

在DOM挂载完成后执行异步操作：

import { onMounted } from 'vue'
onMounted(() => {
  fetchData().then(res => {
    // 处理数据
  })
})

最佳实践：将数据获取逻辑集中在此钩子，避免在setup中直接调用异步函数。与<script setup>语法结合使用时，无需手动返回。

4. onUnmounted：组件卸载钩子

用于清理定时器、事件监听等资源：

import { onUnmounted } from 'vue'
let timer = null
onMounted(() => {
  timer = setInterval(() => {}, 1000)
})
onUnmounted(() => {
  clearInterval(timer) // 防止内存泄漏
})

注意事项：在服务端渲染(SSR)场景下，需通过onBeforeUnmount进行条件判断。

三、依赖管理：watch与watchEffect

5. watch：精确响应式监听

支持深度监听和立即执行：

import { watch, ref } from 'vue'
const count = ref(0)
watch(
  count, 
  (newVal, oldVal) => {
    console.log(`值从${oldVal}变为${newVal}`)
  },
  { immediate: true, deep: true } // 配置项
)

高级用法：监听多个源时使用数组：

watch([refA, refB], ([a, b]) => {})

6. watchEffect：自动追踪依赖

无需显式指定依赖项，自动收集函数内使用的响应式变量：

import { watchEffect, ref } from 'vue'
const x = ref(0)
const y = ref(0)
watchEffect(() => {
  console.log(`x: ${x.value}, y: ${y.value}`)
  // 自动追踪x和y的变化
})

执行时机：默认在组件挂载后执行，可通过{ flush: 'post' }配置在DOM更新后执行。

四、状态共享：provide与inject

7. provide：跨层级状态注入

在祖先组件中提供数据：

import { provide, ref } from 'vue'
const theme = ref('dark')
provide('theme', theme) // 提供响应式数据
// 或提供静态值
provide('apiUrl', 'https://api.example.com')

8. inject：后代组件注入

在任意深度后代组件中获取数据：

import { inject } from 'vue'
const theme = inject('theme') // 自动保持响应性
const apiUrl = inject('apiUrl') // 静态值
// 设置默认值
const fallback = inject('non-existent', 'default')

类型安全：TypeScript环境下可通过泛型增强类型检查：

const theme = inject<Ref<string>>('theme')

五、计算属性：computed

9. computed：声明式派生状态

创建缓存的计算属性：

import { computed, ref } from 'vue'
const count = ref(0)
const double = computed(() => count.value * 2)
// 或带getter/setter的完整形式
const squared = computed({
  get: () => count.value ** 2,
  set: (val) => { count.value = Math.sqrt(val) }
})

性能优化：当计算逻辑复杂时，computed的缓存机制可避免重复计算。

六、异步组件：defineAsyncComponent

10. defineAsyncComponent：动态加载组件

实现组件懒加载：

import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
  import('./components/HeavyComponent.vue')
)
// 带加载状态和错误处理的高级配置
const AsyncWithOptions = defineAsyncComponent({
  loader: () => import('./components/LazyComp.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorComponent,
  delay: 200, // 延迟显示加载状态
  timeout: 3000 // 超时时间
})

路由集成：与Vue Router的component属性配合使用，实现路由级懒加载。

七、组合式函数实践建议

1. 逻辑复用：将通用逻辑封装为.ts文件，如useFetch.ts：

   import { ref } from 'vue'
   export function useFetch(url) {
   const data = ref(null)
   const error = ref(null)
   async function fetchData() {
    try {
      data.value = await fetch(url).then(res => res.json())
    } catch (err) {
      error.value = err
    }
   }
   return { data, error, fetchData }
   }

2. TypeScript增强：为组合式函数添加类型定义：

   interface FetchResult<T> {
   data: Ref<T | null>
   error: Ref<Error | null>
   fetchData: () => Promise<void>
   }
   export function useFetch<T>(url: string): FetchResult<T> {
   // 实现同上
   }

3. 测试策略：使用@vue/test-utils测试组合式函数逻辑，通过mount模拟组件环境。

八、性能优化技巧

1. 避免过度响应式：对不需要响应式的数据使用shallowRef或shallowReactive
2. 批量更新：使用nextTick合并DOM更新
3. 依赖优化：在watchEffect中使用stop手动停止追踪
4. Tree-shaking：按需导入API减少打包体积

九、常见问题解决方案

1. 响应式丢失：解构reactive对象时使用toRefs
2. 异步更新问题：使用watch的flush: 'post'选项
3. 内存泄漏：在onUnmounted中清理所有订阅
4. SSR兼容性：避免在setup中直接访问window对象

十、未来演进方向

Vue3.3+引入的defineModel宏和v-bind的改进，预示着组合式API将向更简洁的双向绑定方向发展。建议开发者持续关注RFC文档，及时掌握v-memo等新特性的最佳实践。

通过系统掌握这10个核心API，开发者能够构建出更可维护、高性能的Vue3应用。组合式编程范式不仅提升了代码复用率，更通过明确的依赖关系使状态管理更加可预测。在实际项目中，建议从简单组件开始逐步采用组合式API，最终实现全项目迁移。