Vue3 组合式 API 完全指南

Vue3 带来的最大变化之一就是组合式 API（Composition API）。它不仅解决了 Vue2 中逻辑复用的难题，还让代码组织更加灵活。本文将全面介绍组合式 API 的使用方法和最佳实践。

为什么需要组合式 API？

在 Vue2 中，我们使用 mixins 来实现逻辑复用，但这种方式存在以下问题：

属性来源不明确：当多个 mixin 混入同一组件时，很难确定某个属性来自哪个 mixin
命名冲突：不同 mixin 可能定义相同的响应式属性
代码组织混乱：相关逻辑被迫分散在不同选项中

组合式 API 是 Vue3 最强大的特性之一，它让我们可以按照逻辑功能组织代码，而不是按照选项类型。

核心 API 详解

1. ref() - 定义响应式数据

import { ref } from 'vue'

// 定义基本类型
const count = ref(0)
const name = ref('Vue3')

// 修改值
count.value++
name.value = 'Vue3.0'

// 在模板中自动解包
// {{ count }} 无需 .value

2. reactive() - 定义响应式对象

import { reactive } from 'vue'

const state = reactive({
    user: {
        name: '张三',
        age: 25
    },
    loading: false
})

// 直接修改
state.loading = true
state.user.name = '李四'

3. computed() - 计算属性

import { ref, computed } from 'vue'

const firstName = ref('张')
const lastName = ref('三')

const fullName = computed(() => {
    return firstName.value + lastName.value
})

4. watch() - 监听器

import { ref, watch } from 'vue'

const count = ref(0)

// 监听单个 ref
watch(count, (newVal, oldVal) => {
    console.log(`count 从 ${oldVal} 变为 ${newVal}`)
})

// 监听多个源
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
    // ...
})

自定义 Hook - 组合式 API 的精髓

组合式 API 最强大的地方在于可以轻松抽取可复用的逻辑——这就是自定义 Hook：

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
    const x = ref(0)
    const y = ref(0)

    function update(event) {
        x.value = event.pageX
        y.value = event.pageY
    }

    onMounted(() => window.addEventListener('mousemove', update))
    onUnmounted(() => window.removeEventListener('mousemove', update))

    return { x, y }
}

// 使用
import { useMouse } from './useMouse'
const { x, y } = useMouse()

最佳实践建议

场景	推荐方式
简单状态、基本类型	`ref()`
复杂对象状态	`reactive()`
需要缓存的计算	`computed()`
副作用操作（API调用）	`watchEffect()`
逻辑复用	自定义 Hook（函数）

总结

Vue3 组合式 API 为我们带来了更灵活的代码组织方式。通过合理使用 ref、reactive、computed、watch 等 API，结合自定义 Hook，我们可以写出更加模块化、可维护的 Vue 应用。

💡 提示：组合式 API 与选项式 API 可以共存，无需完全替换。选择适合团队的方式渐进迁移即可。

🚀 我的博客

Vue3 组合式 API 完全指南：从入门到精通