Vue3 常用的10个组合式 API：从基础到进阶的完整指南

Vue3的组合式API（Composition API）是Vue2选项式API的重大革新，通过逻辑复用和更灵活的代码组织方式，显著提升了大型应用的开发效率。本文将详细解析10个最常用的组合式API，涵盖响应式控制、生命周期管理、计算属性等核心功能，并提供实际开发中的最佳实践。

一、响应式控制：ref与reactive

1. ref：创建响应式基本类型

ref是Vue3中最基础的响应式API，用于将基本类型（String/Number/Boolean等）转换为响应式对象。其核心特性包括：

• 通过.value访问和修改值
• 自动解包在模板中的使用
• 支持TypeScript类型推断

import { ref } from 'vue'
const count = ref(0) // 创建响应式数字
const message = ref('Hello Vue3')
function increment() {
  count.value++ // 必须通过.value修改
}

最佳实践：

• 优先使用ref处理基本类型
• 在模板中可直接使用变量名（自动解包）
• 复杂对象建议使用reactive

2. reactive：创建响应式对象

reactive用于创建响应式对象，适用于嵌套数据结构：

• 深度响应式转换
• 自动解包嵌套的ref
• 返回原始对象的Proxy代理

import { reactive } from 'vue'
const state = reactive({
  user: {
    name: 'John',
    age: 30
  },
  items: ['a', 'b', 'c']
})
// 修改嵌套属性
state.user.name = 'Doe'
state.items.push('d')

性能优化：

• 避免解构响应式对象（会失去响应性）
• 大对象初始化时建议分块处理
• 使用toRefs保持响应式解构

二、计算与监听：computed与watch

3. computed：创建计算属性

computed用于创建基于响应式数据的派生值，具有缓存特性：

• 仅在依赖变化时重新计算
• 支持getter/setter
• 自动追踪依赖

import { computed, ref } from 'vue'
const price = ref(100)
const quantity = ref(2)
const total = computed(() => price.value * quantity.value)
// 带setter的计算属性
const fullName = computed({
  get: () => firstName.value + ' ' + lastName.value,
  set: (newValue) => {
    const [first, last] = newValue.split(' ')
    firstName.value = first
    lastName.value = last
  }
})

使用场景：

• 复杂计算逻辑
• 需要缓存的派生值
• 表单验证等场景

4. watch：响应式数据监听

watch用于监听响应式数据的变化并执行副作用：

• 支持深度监听
• 可立即执行（immediate选项）
• 支持回调返回停止函数

import { watch, ref } from 'vue'
const question = ref('')
const answer = ref('')
watch(question, async (newQuestion) => {
  if (newQuestion.includes('?')) {
    answer.value = 'Thinking...'
    // 模拟API调用
    await fetchAPI(newQuestion)
    answer.value = 'Answer!'
  }
}, { immediate: true })

高级用法：

• 监听多个源：watch([ref1, ref2], callback)
• 深度监听对象：{ deep: true }
• 监听特定属性：() => obj.property

三、生命周期：onMounted等

5. 生命周期钩子

Vue3将生命周期钩子转换为组合式函数，提供更灵活的代码组织：

• onMounted：DOM挂载后执行
• onUpdated：组件更新后执行
• onUnmounted：组件卸载前执行

import { onMounted, onUnmounted } from 'vue'
export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
      window.addEventListener('resize', handleResize)
    })
    onUnmounted(() => {
      console.log('组件将卸载')
      window.removeEventListener('resize', handleResize)
    })
  }
}

组合使用示例：

import { onMounted, ref } from 'vue'
function useFeature() {
  const data = ref(null)
  onMounted(async () => {
    data.value = await fetchData()
  })
  return { data }
}

四、依赖注入：provide与inject

6. provide/inject：跨组件通信

这对API实现了祖先组件向后代组件的依赖注入：

• provide：提供数据
• inject：注入数据
• 支持响应式数据传递

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

高级技巧：

• 结合readonly防止意外修改
• 使用Symbol作为key避免命名冲突
• 传递响应式对象时注意解包问题

五、实用工具：其他重要API

7. toRefs与toRef

将响应式对象的属性转换为独立的ref对象：

import { reactive, toRefs } from 'vue'
const state = reactive({
  x: 0,
  y: 0
})
// 解构后保持响应性
const { x, y } = toRefs(state)

8. nextTick

在DOM更新后执行回调：

import { nextTick } from 'vue'
async function update() {
  state.message = 'Updated'
  await nextTick()
  // 此时DOM已更新
  console.log(document.getElementById('msg').textContent)
}

9. shallowRef与shallowReactive

浅层响应式API，适用于大型不可变数据：

import { shallowRef } from 'vue'
const bigData = shallowRef({ /* 大型对象 */ })
// 只有.value的替换会触发更新

10. 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)
      }
    }
  })
}

六、组合式API最佳实践

1. 逻辑组织：按功能而非选项类型组织代码
2. 类型安全：充分利用TypeScript支持
3. 性能优化：
   • 避免在模板中使用复杂计算
   • 合理使用shallow系列API
   • 对大型列表使用虚拟滚动
4. 可测试性：将逻辑提取到独立函数中

七、常见问题解决方案

1. 响应式丢失：

   • 错误：直接解构reactive对象
   • 解决：使用toRefs或toRef

2. 异步更新问题：

   • 错误：同步操作依赖更新后的DOM
   • 解决：使用nextTick

3. 内存泄漏：

   • 错误：未清理的定时器/事件监听
   • 解决：在onUnmounted中清理

八、进阶技巧

1. 自动导入：使用unplugin-auto-import插件自动导入API
2. 组合函数复用：将通用逻辑提取为可复用函数
3. 状态管理：小型应用可用reactive替代Pinia
4. SSR优化：使用onServerPrefetch预取数据

九、总结与展望

Vue3的组合式API通过其灵活性和可组合性，正在改变Vue应用的开发方式。掌握这10个核心API，开发者可以：

• 编写更清晰、更易维护的代码
• 实现更高效的逻辑复用
• 构建更强大的Vue3应用

随着Vue3生态的完善，组合式API将成为主流开发模式。建议开发者深入理解其设计理念，并在实际项目中逐步应用这些最佳实践。