Vue3 组合式 API（实战总结）

Vue3 组合式 API：让逻辑更清晰，开发更高效

如果你正在使用 Vue 3，那么“组合式 API”一定不会陌生。它不是简单的语法升级，而是一次对组件开发方式的深度重构。相比传统的选项式 API（Options API），组合式 API 更加灵活，逻辑组织更清晰，尤其在处理复杂业务逻辑时优势明显。

想象一下，一个组件就像一栋房子。在 Vue 2 的选项式 API 中，你会把所有的门窗、水电、地板、墙纸等设计都分散在不同的“房间”里——data 是地板，methods 是门窗，computed 是墙纸。当你需要修改一个功能，比如“点击按钮切换主题”，你得在多个地方来回跳转，容易出错，也难维护。

而 Vue 3 的组合式 API 就像是把所有和“主题切换”相关的代码都集中到一个“主题管理模块”里。这个模块可以复用、可测试、可拆解。这就是组合式 API 的核心思想：按逻辑而非类型组织代码。

什么是组合式 API？核心思想解析

组合式 API 是 Vue 3 提供的一种新的编写组件的方式，它通过 setup() 函数作为入口，允许你以函数式的方式组织组件的逻辑。

与选项式 API 的 data、methods、computed 等选项并列不同，组合式 API 将相关逻辑聚合在一起，实现“高内聚、低耦合”。

核心函数：ref 与 reactive

在组合式 API 中，ref 和 reactive 是两个核心工具，用于创建响应式数据。

import { ref, reactive } from 'vue'

export default {
  setup() {
    // ref 用于包装基本类型（如数字、字符串）
    const count = ref(0) // count 是一个响应式引用，值为 0

    // reactive 用于包装对象
    const user = reactive({
      name: '小明',
      age: 25
    })

    // 通过 .value 访问 ref 的值
    const increment = () => {
      count.value++ // 注意：必须加 .value
    }

    // reactive 对象的属性直接访问
    const changeName = () => {
      user.name = '小红'
    }

    // 返回所有需要在模板中使用的变量和方法
    return {
      count,
      user,
      increment,
      changeName
    }
  }
}

💡 小贴士：ref 返回的是一个对象，包含 value 属性。虽然我们用 count.value 来读写，但在模板中可以直接写 {{ count }}，Vue 会自动解包。

逻辑复用：自定义 Composables

组合式 API 最强大的地方在于“逻辑复用”。你不再需要通过 mixins 来共享逻辑，而是通过自定义函数来实现。

什么是 Composables？

Composables 是指那些返回响应式数据和方法的函数。它们像“乐高积木”一样，可以被多个组件复用。

案例：封装一个“计数器”功能

// composables/useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)

  const increment = () => {
    count.value++
  }

  const decrement = () => {
    count.value--
  }

  const reset = () => {
    count.value = initialValue
  }

  // 返回所有需要暴露的变量和方法
  return {
    count,
    increment,
    decrement,
    reset
  }
}

在组件中使用

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
    <button @click="reset">重置</button>
  </div>
</template>

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

// 使用自定义 Composable
const { count, increment, decrement, reset } = useCounter(10)
</script>

✅ 优势：useCounter 可以在多个组件中复用，比如一个商品页面的点赞数、一个表单的字段计数，都可以用同一个逻辑。

与生命周期的结合：onMounted 等钩子函数

在组合式 API 中，Vue 提供了一组与生命周期对应的函数，如 onMounted、onUpdated、onUnmounted。

这些函数让你可以更直观地处理生命周期事件。

示例：加载用户数据

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const userData = ref(null)
    const loading = ref(true)

    // 组件挂载后加载数据
    onMounted(async () => {
      try {
        const response = await fetch('/api/user/1')
        userData.value = await response.json()
      } catch (error) {
        console.error('加载失败', error)
      } finally {
        loading.value = false
      }
    })

    return {
      userData,
      loading
    }
  }
}

📌 说明：onMounted 是一个“钩子函数”，它会在组件挂载完成后执行。这比在 mounted 选项中写逻辑更清晰，尤其在多个生命周期事件时。

与 script setup 语法糖结合使用

Vue 3 推出了 script setup 语法糖，让组合式 API 更简洁。

传统写法 vs script setup

传统写法（需显式返回）

<script>
export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++

    return { count, increment }
  }
}
</script>

script setup 写法（自动返回）

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

const count = ref(0)
const increment = () => count.value++

// 不需要 return，变量和函数自动暴露给模板
</script>

✅ 优势：代码更简洁，开发效率更高。尤其在小型组件中，script setup 是首选。

处理复杂逻辑：组合多个 Composables

组合式 API 的真正威力在于“组合”。你可以把多个小逻辑组合成一个大逻辑。

案例：封装一个“用户登录状态管理”

// composables/useAuth.js
import { ref, watch } from 'vue'

export function useAuth() {
  const token = ref(localStorage.getItem('authToken'))
  const isAuthenticated = ref(!!token.value)

  const login = (newToken) => {
    token.value = newToken
    localStorage.setItem('authToken', newToken)
    isAuthenticated.value = true
  }

  const logout = () => {
    token.value = null
    localStorage.removeItem('authToken')
    isAuthenticated.value = false
  }

  // 监听 token 变化，自动更新状态
  watch(token, (newVal) => {
    isAuthenticated.value = !!newVal
  })

  return {
    token,
    isAuthenticated,
    login,
    logout
  }
}

在组件中使用

<template>
  <div>
    <p v-if="isAuthenticated">欢迎，{{ token }}</p>
    <p v-else>请登录</p>
    <button v-if="!isAuthenticated" @click="login('abc123')">登录</button>
    <button v-else @click="logout">退出</button>
  </div>
</template>

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

const { token, isAuthenticated, login, logout } = useAuth()
</script>

🌟 这个例子展示了组合式 API 如何让“状态管理”变得可读、可维护、可复用。

总结：为什么推荐使用组合式 API？

组合式 API 并不是要取代选项式 API，而是为复杂项目提供更优雅的解决方案。尤其在团队协作中，逻辑清晰的代码能显著降低维护成本。

对于初学者，建议先掌握 ref、reactive 和 setup 基础用法；中级开发者可以深入探索 Composables 的设计模式，提升代码质量。

最后一击：从 Vue 2 到 Vue 3 的平滑过渡

如果你正在从 Vue 2 迁移，别担心。Vue 3 完全兼容选项式 API，你可以逐步引入组合式 API。先从 script setup 开始，再逐步将逻辑封装为 Composables。

记住：不要一次性重构整个项目。先从新功能开始用组合式 API，体验它的优势，再逐步迁移旧代码。

Vue3 组合式 API 不仅是一次技术升级，更是开发思维的进化。它让你从“写代码”转向“设计逻辑”，真正实现“写得更少，做得更多”。