救命！Vue3 的 Composition API，居然能让我少写 80% 冗余代码？

Composition API 的价值，不只是“新语法”，而是用函数式思维组织逻辑，让代码可读、可测、可复用。

还在你的 Vue 组件里，为找一个变量在 data、methods、computed、watch 之间来回切换吗？试试 Composition API 吧，一个 setup 函数就能整合所有逻辑，代码量锐减不说，逻辑清晰度直线上升，连实习生都能一眼看明白。

如果你也经历过这些场景：

• 在 Options API 里找一个变量，得翻半天代码。
• 相同的逻辑（比如表单校验）在多个组件里复制粘贴。
• 面试被问到“Vue3 和 Vue2 区别”，只能干巴巴地回答“Proxy 更快”。
• 想复用逻辑却只能依赖 Mixin，结果陷入命名冲突的泥潭。

那么，这篇手把手实操指南，就是为你准备的。无需死记硬背，所有代码模板都可以直接复制使用，今天就能让你的项目焕然一新。

一、先澄清一个误区：Composition API 不是“花里胡哨”，是真能救急

不少开发者会有疑问：“Options API 用得好好的，为什么要换？” 但真相往往是，当组件逻辑变得复杂时，Options API 的天然割裂感就暴露无遗了。

来看一个真实场景：编写一个具备防抖搜索、加载状态和错误提示的搜索框组件。

如果用 Options API 来写：

• 在 data 里定义 keyword, loading, error。
• 在 methods 里写 search(), debounce()。
• 在 watch 里监听 keyword 来触发搜索。
• 可能还要在 mounted 里初始化默认值。

看到了吗？同一个功能，逻辑被分散在四个不同的地方！维护起来简直是一场噩梦。

而用 Composition API 来写呢？

const { keyword, loading, error, search } = useSearch()

一行代码，逻辑高度内聚，复用起来毫无负担。这就是函数式思维的魅力所在。

这并非纸上谈兵。看看大厂的现状：字节、腾讯、阿里内部的 Vue3 项目，几乎 100% 强制使用 Composition API，并且已成为面试的必考知识点。

二、核心干货：Composition API 3 个必学用法（附可运行模板）

1. script setup：所有逻辑的“入口”，一次搞定所有

这是 Vue3 最新、最推荐的写法。无需手动 return，所有顶层变量和方法都会自动暴露给模板。

来看一个可以直接复制到项目里运行的代码模板：

<script setup>
// 1. 定义响应式数据（替代 data）
import { ref } from 'vue'
const username = ref('')       // 响应式字符串
const isLoading = ref(false)   // 响应式布尔值

// 2. 定义方法（替代 methods）
const login = () => {
  isLoading.value = true // 模拟登录请求
  setTimeout(() => {
    console.log('登录成功，账号：', username.value)
    isLoading.value = false
  }, 1000)
}
// 3. 无需 return！<script setup> 自动暴露
</script>

这里有个关键提醒：只有传统的 setup() 函数才需要手动 return，使用 <script setup> 语法糖则完全不需要！

2. ref vs reactive：响应式数据的“两大神器”，别再用混了

记住一个简单的口诀：简单数据用 ref，复杂对象用 reactive。

【ref 实操示例】

import { ref } from 'vue'
const count = ref(0)
const increment = () => {
  count.value++ // 注意：必须通过 .value 访问！
}

【reactive 实操示例】

import { reactive } from 'vue'
const user = reactive({
  name: '',
  age: 0,
  hobbies: []
})
const updateUser = () => {
  user.name = 'Alice' // 直接修改属性，无需 .value
  user.hobbies.push('coding')
}

这里有个进阶技巧：使用 toRefs 解构 reactive 对象，可以保持其响应性。

import { reactive, toRefs } from 'vue'
const user = reactive({ username: '', password: '' })
// 解构后仍保持响应式
const { username, password } = toRefs(user)
username.value = 'test' // 修改有效！

3. 生命周期钩子：按需引入，不用写空方法

Vue3 的生命周期钩子需要显式导入，这种方式更灵活，也避免了在组件中留下无用的空方法。

【实操示例：页面加载后请求数据】

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

const list = ref([])
onMounted(async () => {
  const res = await axios.get('/api/user/list')
  list.value = res.data
})
</script>

再次提醒：生命周期钩子必须在 <script setup> 或 setup() 函数内部调用，不能在外部使用。

三、实战避坑：90% 的人都会踩的 3 个致命错误

坑1：忘记给 ref 加 .value，导致响应式失效

// 错误写法
const count = ref(0)
count = 1 // 页面不会更新！
// 正确写法
count.value = 1

坑2：用 reactive 创建简单数据

// 错误写法
const count = reactive(0) // reactive 只接受对象或数组
count = 1 // 响应式丢失！
// 正确写法
const count = ref(0)

坑3：为了“规范”强行封装，把简单逻辑搞复杂

正确的做法是：只有那些需要在多个组件间复用的逻辑，才值得封装成自定义 Hook。如果逻辑只在一个组件内使用，直接写在 setup 里反而更清晰。

四、进阶技巧：用自定义 Hook 复用逻辑，效率拉满！

将重复的代码（如表单校验、请求封装、本地存储操作）抽离成自定义 Hook，可以让多个组件直接引入使用，轻松减少 80% 的重复代码。

【实战示例：封装通用表单校验 Hook】

第一步：创建 hooks/useForm.js

// hooks/useForm.js
import { ref } from 'vue'

export const useForm = (rules) => {
  const form = ref({})
  const errors = ref({})

  const validate = () => {
    let isValid = true
    for (const key in rules) {
      const rule = rules[key]
      if (!form.value[key] && rule.required) {
        errors.value[key] = rule.message
        isValid = false
      } else {
        errors.value[key] = ''
      }
    }
    return isValid
  }

  return { form, errors, validate }
}

第二步：在组件中使用

<script setup>
import { useForm } from '@/hooks/useForm'

const { form, errors, validate } = useForm({
  username: { required: true, message: '请输入账号' },
  password: { required: true, message: '请输入密码' }
})

const login = () => {
  if (validate()) {
    console.log('提交数据:', form.value)
  }
}
</script>

效果立竿见影：以后任何需要表单校验的地方，只需 3 行代码引入这个 Hook，校验逻辑自动生效，开发效率大幅提升。

五、谁在用 Composition API？

• 字节跳动：抖音 Web 端已全量采用 Vue3 + Composition API。
• 腾讯文档：其协同编辑的核心组件正是基于自定义 Hook 构建的。
• 阿里云控制台：复杂的表单系统 100% 采用了 useXXX 的模式。
• Vue 最新生态：Pinia、Vue Router 4 等核心库都已全面拥抱 Composition API。

六、结语：少写代码，才是高级程序员的终极追求

说到底，Composition API 的价值远不止于一种“新语法”。它代表的是一种函数式思维，一种更优雅、更高效的代码组织方式，最终目标是让代码更可读、更可测、更可复用。当你不再需要为了找一个变量而翻遍整个文件时，你就会真切地感受到——这次升级，绝对值了。

来源：互联网