Vue3常用的10个组合式API深度解析

Vue3的组合式API（Composition API）通过逻辑复用和更灵活的代码组织方式，彻底改变了Vue应用的开发模式。本文将深入解析10个最常用的组合式API，涵盖响应式数据管理、生命周期控制、依赖追踪等核心场景，帮助开发者构建更高效的Vue3应用。

一、响应式数据管理核心API

1. ref：基础响应式容器

ref是创建响应式数据的基础工具，通过.value属性访问和修改值。其内部实现基于ES6的Proxy对象，能够深度追踪对象变化。

import { ref } from 'vue'
const count = ref(0) // 创建响应式数字
const obj = ref({ name: 'Vue3' }) // 创建响应式对象
function increment() {
  count.value++ // 必须通过.value修改
  obj.value.name = 'Composition API' // 对象属性修改也需通过.value
}

适用场景：需要追踪单个值的变更，或需要明确区分响应式数据和非响应式数据的场景。与Options API中的data相比，ref提供了更细粒度的控制。

2. reactive：深度响应式对象

reactive创建深度响应式的对象，所有嵌套属性都会自动转换为响应式。其实现原理是通过Proxy拦截对象操作。

import { reactive } from 'vue'
const state = reactive({
  user: { name: 'Alice' },
  items: []
})
function updateUser() {
  state.user.name = 'Bob' // 自动触发更新
  state.items.push({ id: 1 }) // 数组操作也响应式
}

性能优化：对于大型对象，reactive比多个ref组合更高效。但需注意，直接解构reactive对象会失去响应性，应使用toRefs处理。

3. computed：计算属性

computed创建基于依赖的缓存计算值，只有依赖变化时才会重新计算。

import { computed, ref } from 'vue'
const price = ref(100)
const taxRate = ref(0.2)
const totalPrice = computed(() => {
  return price.value * (1 + taxRate.value) // 依赖price和taxRate
})

高级用法：可配合watchEffect实现更复杂的响应式逻辑，或通过computed的getter/setter模式创建双向绑定计算属性。

二、生命周期与副作用控制

4. onMounted：挂载阶段钩子

onMounted在组件挂载到DOM后执行，是初始化第三方库或获取DOM元素的理想时机。

import { onMounted } from 'vue'
export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
      // 初始化图表库等操作
    })
  }
}

对比Options API：与mounted生命周期等效，但通过setup函数集中管理，更利于逻辑复用。

5. watch：精确依赖追踪

watch监听特定响应式数据的变化，支持深度监听和立即执行。

import { watch, ref } from 'vue'
const searchQuery = ref('')
watch(searchQuery, (newVal, oldVal) => {
  console.log(`搜索词从${oldVal}变为${newVal}`)
  // 执行搜索API调用
}, { immediate: true, deep: true }) // 立即执行且深度监听

性能优化：对于复杂对象，应使用deep: false避免不必要的深度监听。对于数组，建议监听特定索引或使用watchEffect。

6. watchEffect：自动依赖追踪

watchEffect自动追踪回调中使用的所有响应式依赖，依赖变化时重新执行。

import { watchEffect, ref } from 'vue'
const count = ref(0)
const double = ref(0)
watchEffect(() => {
  double.value = count.value * 2 // 自动追踪count的依赖
  console.log(`双倍值为${double.value}`)
})

清理副作用：可在回调中返回清理函数，在依赖失效时执行。

watchEffect((onCleanup) => {
  const timer = setInterval(() => {}, 1000)
  onCleanup(() => clearInterval(timer)) // 组件卸载时清理
})

三、上下文与工具API

7. inject/provide：跨组件通信

provide和inject实现祖先组件向子孙组件传递数据，避免props层层传递。

// 祖先组件
import { provide, ref } from 'vue'
const theme = ref('dark')
provide('theme', theme)
// 后代组件
import { inject } from 'vue'
const theme = inject('theme', 'light') // 默认值'light'

响应式传递：若需保持响应性，应传递ref或reactive对象。

8. toRefs：解构响应式对象

toRefs将reactive对象的属性转换为ref，保持解构后的响应性。

import { reactive, toRefs } from 'vue'
const state = reactive({ x: 1, y: 2 })
const { x, y } = toRefs(state) // x和y现在是ref
// 模板中可直接使用x和y，无需.value

应用场景：在setup函数中解构reactive对象时，必须使用toRefs保持响应性。

四、高级响应式控制

9. shallowRef/shallowReactive：浅层响应式

shallowRef和shallowReactive创建浅层响应式数据，仅第一层属性是响应式的。

import { shallowRef } from 'vue'
const bigData = shallowRef({ nested: { value: 1 } })
// 修改bigData.value会触发更新
// 但修改bigData.value.nested.value不会触发更新

性能优化：适用于大型不可变数据或第三方库实例，避免不必要的深度监听开销。

10. customRef：自定义响应式

customRef创建完全自定义的ref，实现精细化的响应式控制。

import { customRef } from 'vue'
function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track() // 追踪依赖
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger() // 触发更新
        }, delay)
      }
    }
  })
}
// 使用防抖ref
const debouncedText = useDebouncedRef('', 300)

典型应用：实现防抖、节流、数据校验等高级响应式逻辑。

五、最佳实践建议

1. 合理选择响应式类型：简单值用ref，复杂对象用reactive，大型不可变数据用shallowRef。
2. 避免过度响应式：对不需要响应式的数据（如常量、函数）使用普通变量。
3. 命名规范：ref变量名以Ref结尾（如countRef），解构后去掉Ref后缀。
4. 性能监控：使用Vue Devtools的Performance标签分析响应式更新开销。
5. TypeScript支持：为ref和reactive添加明确的类型注解，提升代码可维护性。

通过掌握这10个核心组合式API，开发者能够构建出更模块化、可维护且高性能的Vue3应用。组合式API的灵活性不仅提升了代码复用率，还为复杂状态管理提供了更优雅的解决方案。