Vue3常用组合式API精解：10大核心函数全攻略

Vue3的组合式API（Composition API）通过逻辑复用和更灵活的代码组织方式，彻底改变了前端开发范式。本文将系统梳理10个最常用的组合式API，从基础响应式控制到高级状态管理，结合实际开发场景提供深度解析。

一、响应式控制核心三件套

1. ref()：基础响应式容器

ref是创建响应式数据的最小单元，通过.value访问内部值。其独特之处在于可包装任意类型数据，包括基本类型和对象。

import { ref } from 'vue'
const count = ref(0)
const user = ref({ name: 'Alice' })
// 修改值必须通过.value
count.value++ 
user.value.name = 'Bob'

最佳实践：在模板中自动解包，无需写.value；在JSX或计算属性中需显式访问。对于对象类型，优先考虑reactive()。

2. reactive()：深度响应式对象

创建完全响应式的对象，所有嵌套属性都会被深度监听。与ref不同，它不需要.value访问。

const state = reactive({
  user: { name: 'Alice' },
  items: []
})
// 直接修改属性
state.user.name = 'Bob'
state.items.push(1)

注意事项：解构会丢失响应性，需使用toRefs解构：

const { user } = toRefs(state)
// 现在user是响应式的ref对象

3. computed()：响应式计算属性

基于现有响应式数据创建派生状态，具有缓存机制。

const count = ref(1)
const double = computed(() => count.value * 2)
// 带setter的计算属性
const fullName = computed({
  get: () => firstName.value + ' ' + lastName.value,
  set: (newValue) => {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

性能优化：复杂计算应考虑使用watchEffect或watch替代。

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

4. onMounted()：组件挂载钩子

替代Options API的mounted，在DOM挂载完成后执行。

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

组合使用：常与onBeforeUnmount配对使用清理资源：

let timer
onMounted(() => {
  timer = setInterval(() => {}, 1000)
})
onBeforeUnmount(() => clearInterval(timer))

5. watchEffect()：自动追踪依赖

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

const count = ref(0)
const data = ref(null)
watchEffect(async () => {
  // 自动追踪count变化
  const response = await fetch(`/api?count=${count.value}`)
  data.value = await response.json()
})

与watch的区别：watchEffect不需要显式指定依赖，但无法获取旧值。需要旧值时使用watch。

6. watch()：精确响应式监听

监听特定响应式数据的变化，可获取新旧值。

const count = ref(0)
const name = ref('')
// 监听单个源
watch(count, (newVal, oldVal) => {
  console.log(`count从${oldVal}变为${newVal}`)
})
// 监听多个源
watch([count, () => name.value], ([newCount, newName], [oldCount, oldName]) => {
  // 处理变化
})

深度监听：对对象监听需设置deep: true：

const user = reactive({ name: 'Alice' })
watch(() => user, (newVal) => {
  // 深度监听对象变化
}, { deep: true })

三、状态管理与依赖注入

7. 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时，注入方会自动获得响应性。如需修改，可在祖先组件提供方法：

provide('theme', {
  value: ref('dark'),
  setTheme: (newTheme) => { theme.value = newTheme }
})

8. shallowRef()：浅层响应式

创建只对.value本身响应的ref，不深度监听内部变化。

const largeObject = shallowRef({ nested: { /* 大量数据 */ } })
// 修改.value会触发更新
largeObject.value = newObject
// 修改嵌套属性不会触发更新
largeObject.value.nested.prop = newValue // 无响应

性能场景：适用于大型不可变数据或明确不需要深度监听的场景。

四、实用工具API

9. toRefs()：解构响应式对象

将reactive对象的每个属性转为ref，保持响应性。

const state = reactive({
  count: 0,
  name: 'Alice'
})
// 解构后保持响应性
const { count, name } = toRefs(state)
// 现在count和name都是ref对象
count.value++

与toRef的区别：toRef用于创建单个属性的ref，toRefs用于批量解构。

10. customRef()：自定义响应式

实现完全控制的响应式引用，适用于防抖、节流等场景。

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)
      }
    }
  })
}
const debouncedText = useDebouncedRef('')

实现原理：通过track和trigger手动控制依赖追踪和更新通知。

高级实践建议

1. 组合函数封装：将相关API组合成自定义hook，如useFetch封装ref+watchEffect+错误处理
2. 性能监控：使用onRenderTracked和onRenderTriggered调试不必要的响应式依赖
3. TypeScript集成：为自定义组合式API添加类型声明，提升代码可维护性
4. SSR优化：onServerPrefetch与clientOnly配合处理服务端渲染场景

总结

这10个组合式API构成了Vue3响应式系统的核心骨架。从基础的ref/reactive到高级的customRef，每个API都针对特定场景提供了优雅的解决方案。掌握它们不仅能提升开发效率，更能深入理解Vue3的响应式原理。建议开发者通过实际项目练习，逐步构建自己的组合式API工具库。