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

Vue3 引入的组合式 API（Composition API）是 Vue.js 的一次重大升级，它为开发者提供了更加灵活和强大的代码组织方式。本文将从零开始，带你全面掌握 Vue3 组合式 API 的核心概念和使用技巧。

为什么需要组合式 API？

在 Vue2 中，我们主要使用选项式 API（Options API）来组织代码。这种方式在小型项目中表现良好，但随着业务复杂度的提升，代码会变得难以维护：

• 相关逻辑分散在不同的选项中（如 data、methods、computed）
• 复用逻辑主要依靠 mixin，容易产生命名冲突
• TypeScript 支持不够友好

组合式 API 解决了这些问题，让我们能够将相关逻辑组织在一起，提高代码的可维护性和复用性。

基础语法

setup 函数

setup() 是组合式 API 的入口函数，在组件创建之前执行。

<script setup>
import { ref, reactive, computed } from 'vue'

const count = ref(0)
const state = reactive({ name: '智源论坛' })

const doubleCount = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

ref 与 reactive

ref 用于创建响应式的基本类型数据，reactive 用于创建响应式的对象。

// ref - 基本类型
const message = ref('Hello Vue3')
console.log(message.value)  // 访问需要 .value

// reactive - 对象
const user = reactive({
  name: '张三',
  age: 25
})
console.log(user.name)  // 直接访问

生命周期钩子

Vue3 的生命周期钩子需要在 setup 中通过 import 引入：

import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件已挂载')
})

onUnmounted(() => {
  console.log('组件即将卸载')
})

自定义 Hook

自定义 Hook 是组合式 API 最强大的特性之一，它允许我们提取和复用有状态逻辑。

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

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

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

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

  return { x, y }
}

// 组件中使用
const { x, y } = useMouse()

依赖注入

provide 和 inject 实现了跨组件层级共享数据：

// 父组件
import { provide, ref } from 'vue'

const theme = ref('dark')
provide('theme', theme)

// 子/孙组件
import { inject } from 'vue'

const theme = inject('theme')

组合式 API 最佳实践

1. 使用 <script setup>：更简洁的语法，更好的性能
2. 按功能组织代码：将相关的响应式状态、计算属性、方法分组
3. 提取自定义 Hook：复用有状态的逻辑
4. 保持单向数据流：避免在子组件中直接修改 prop
5. 使用 TypeScript：享受更好的类型推断

总结

Vue3 组合式 API 是现代 Vue.js 开发的核心，它为开发者提供了更强大的代码组织能力。通过本文的学习，你应该已经掌握了组合式 API 的核心概念和实践技巧。

想要深入学习 Vue3？推荐我们的精品课程《Vue3 企业级项目实战》，包含完整的电商项目源码和详细视频讲解。