Vue3组合式API实战：从setup到响应式数据的完整指南

随着前端技术的飞速发展，Vue3的正式发布为开发者带来了革命性的变化。其中最引人瞩目的特性莫过于组合式API（Composition API）。相比于Vue2的选项式API，组合式API提供了更灵活的逻辑复用方式，让代码组织更加清晰。本文将通过实际操作步骤，带领你从零开始掌握Vue3组合式API的核心用法。

在Vue2中，当组件逻辑变得复杂时，我们常常需要在data、computed、methods、watch等选项中来回切换，导致同一功能的代码被分散在各处。组合式API通过将相关逻辑组织在一起，完美解决了这个问题。同时，它天然支持逻辑复用，让自定义组合函数变得轻而易举。

第一步：环境准备与项目创建

首先，确保你的开发环境满足以下要求：Node.js版本16.0或以上。接着，打开终端执行以下命令创建Vue3项目：

npm create vue@latest
cd vue-project
npm install
npm run dev

这样我们就拥有了一个完整的Vue3开发环境。如果你的项目是基于Vue2，也可以通过官方迁移构建版本逐步升级。

第二步：理解setup函数的本质

setup是组合式API的入口，它在组件实例创建之前执行。这意味着在setup内部，我们不能使用this关键字。setup函数接受props和context两个参数，并返回一个对象，该对象中的属性将被暴露给模板使用。

<script setup>
import { ref } from 'vue'

const message = ref('Hello, Vue3!')
</script>

<template>
  <div>{{ message }}</div>
</template>

注意，上面的代码使用了<script setup>语法糖，这是Vue3.2引入的简化写法，极大地减少了样板代码。在setup语法糖中，所有顶层变量和函数都会自动暴露给模板。

第三步：响应式数据的核心——ref与reactive

在组合式API中，我们不再直接使用data选项，而是通过ref和reactive来创建响应式数据。ref用于包装基本类型和对象，而reactive则只接受对象类型。二者的区别在于：ref在模板中会自动解包，而在JavaScript代码中需要通过.value访问；reactive则不需要额外的解包操作。

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

// ref方式
const count = ref(0)
const increment = () => {
  count.value++  // 注意需要使用.value
}

// reactive方式
const user = reactive({
  name: '张三',
  age: 25
})
</script>

<template>
  <p>Count: {{ count }}</p>
  <p>User: {{ user.name }}, {{ user.age }}</p>
  <button @click="increment">增加</button>
</template>

在实际开发中，推荐使用ref来处理基础类型数据，而reactive适合管理复杂的对象结构。值得注意的是，reactive存在一个限制：不能直接替换整个响应式对象，否则会丢失响应性。这种情况下，可以使用ref包裹整个对象。

第四步：组合式API的计算属性与侦听器

计算属性和侦听器是Vue应用中的核心功能。在组合式API中，我们使用computed和watch函数来实现类似功能。computed返回一个只读的响应式引用，而watch可以侦听多个数据源的变化。

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

const price = ref(100)
const quantity = ref(2)

// 计算属性
const total = computed(() => price.value * quantity.value)

// 侦听器
watch([price, quantity], ([newPrice, newQuantity]) => {
  console.log(`价格变为${newPrice}，数量变为${newQuantity}`)
}, { deep: true, immediate: true })
</script>

<template>
  <p>总价：{{ total }}元</p>
</template>

这段代码展示了一个典型的购物车计算场景。computed会基于依赖自动缓存，只有依赖变化时才会重新计算，具有极高的性能。watch则适合执行异步操作或处理复杂的副作用逻辑。

第五步：逻辑复用与自定义组合函数

组合式API的最大优势在于逻辑复用。我们可以将相关的状态和行为封装到一个自定义函数中，这个函数被称为组合式函数。下面是一个使用鼠标追踪功能的示例：

// 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.clientX
    y.value = event.clientY
  }

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

  return { x, y }
}

然后在组件中使用这个组合式函数：

<script setup>
import { useMouse } from '@/composables/useMouse'

const { x, y } = useMouse()
</script>

<template>
  <p>鼠标位置：X: {{ x }}, Y: {{ y }}</p>
</template>

这种模式让代码简洁且高度可复用。你可以将任何业务逻辑提取为组合式函数，比如网络请求、表单验证、localStorage操作等。

第六步：生命周期钩子的组合式写法

在组合式API中，所有生命周期钩子都以on为前缀，且只能在setup期间同步调用。常用的有onMounted、onUpdated、onUnmounted等，它们与Vue2选项式API中的created、mounted等一一对应。

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const timer = ref(null)

onMounted(() => {
  timer.value = setInterval(() => {
    console.log('定时器执行中...')
  }, 1000)
})

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

这种写法将相关联的代码聚集在一起，极大提高了代码的可读性和维护性。注意在组件卸载时，需要手动清理定时器、事件监听等资源，避免内存泄漏。

总结与最佳实践

通过以上六个步骤，我们已经掌握了Vue3组合式API的核心用法。在实际项目中，建议遵循以下最佳实践：第一，当组件逻辑复杂度不高时，可以继续使用选项式API；第二，对于大型组件，优先将逻辑拆分为多个组合式函数；第三，组合式函数文件统一放入composables目录中；第四，规范命名，使用use作为组合式函数的前缀。

Vue3组合式API不仅解决了代码组织问题，更开启了一种全新的组件设计思维。希望这篇教程能帮助你顺利过渡到Vue3开发，构建出更健壮、更易维护的前端应用。随着你的不断实践，你会发现组合式API带来的效率提升是显而易见的。