文章目录
- 一、为什么需要组合式 API？Vue2 选项式 API 的痛点
- Vue2 选项式 API 示例（痛点）
- 二、Composition API 核心：`setup()` 函数
- 关键机制
- 三、Vue2 选项式 vs Vue3 Composition API 对比
- 示例：计数器组件（基础版）
- 四、Composition API 的核心优势：逻辑复用
- 场景：提取可复用的计数逻辑
- 步骤 1：创建组合函数（Composable）
- 步骤 2：在组件中复用
- 五、TypeScript 类型推断优势
- Vue2 选项式（TypeScript 问题）
- Vue3 组合式（TypeScript 优势）
- 六、实际开发中的最佳实践
- 1. 组合函数命名规范
- 2. 状态管理优化
- 3. 与 Vue2 选项式共存（过渡期）
- 七、Composition API 与 Options API 对比图
- 八、常见陷阱与解决方案
- 九、为什么 Composition API 是 Vue3 的核心革命？
- 结语：拥抱组合式开发
核心价值：告别 Vue2 选项式 API 的碎片化代码，通过
setup()函数将逻辑按功能组织，实现可复用、类型安全、可读性更强的组件开发。
一、为什么需要组合式 API？Vue2 选项式 API 的痛点
Vue2 的选项式 API（Options API）将组件逻辑按data、methods、computed等选项分散组织。当组件复杂度上升时，相同逻辑被拆散在不同选项中，导致：
- 代码可读性差：同一功能的代码分散在不同位置
- 逻辑复用困难：难以提取公共逻辑（如表单验证、API 请求）
- TypeScript 支持弱：类型推断不明确，需大量类型声明
Vue2 选项式 API 示例（痛点）
exportdefault{data(){return{count:0,// 状态name:'',// 状态}},methods:{increment(){this.count++;},// 行为validateName(){returnthis.name.length>2;}// 行为},computed:{countPlusOne(){returnthis.count+1;}// 计算属性}}💡问题：
count和increment逻辑被拆散在data和methods中，复用需复制粘贴。
二、Composition API 核心：setup()函数
Vue3 引入Composition API作为核心 API（非可选），通过setup()函数集中组织逻辑，返回响应式数据和方法。
关键机制
| 机制 | 作用 | 优势 |
|---|---|---|
setup()函数 | 组件逻辑入口，执行时机在data/methods之前 | 逻辑按功能组织，而非按选项分组 |
ref()/reactive() | 创建响应式状态（替代data） | 类型安全，支持 TypeScript |
| 返回对象 | 暴露给模板使用（替代methods/computed） | 逻辑复用更简单 |
✨本质：将组件逻辑组合成可复用的函数（Composable Functions）。
三、Vue2 选项式 vs Vue3 Composition API 对比
示例：计数器组件（基础版）
| Vue2 选项式 | Vue3 组合式 |
|---|---|
javascript<br>export default {<br> data() { return { count: 0 } },<br> methods: { increment() { this.count++ } }<br>} | javascript<br>import { ref } from 'vue';<br>export default {<br> setup() {<br> const count = ref(0);<br> const increment = () => count.value++;<br> return { count, increment }<br> }<br>} |
✅关键差异：
- Vue3 无需
this，直接使用变量（count.value）- 逻辑按功能组织（状态 + 行为）
- 无需
data/methods选项
四、Composition API 的核心优势：逻辑复用
场景：提取可复用的计数逻辑
步骤 1：创建组合函数（Composable）
// useCounter.jsimport{ref}from'vue';exportfunctionuseCounter(start=0){constcount=ref(start);constincrement=()=>count.value++;constdecrement=()=>count.value--;return{count,increment,decrement};}步骤 2：在组件中复用
<script setup> import { useCounter } from './useCounter'; // 直接调用组合函数 const { count, increment } = useCounter(10); </script> <template> <div> Count: {{ count }} <button @click="increment">+1</button> </div> </template>💡复用价值：
useCounter可在多个组件中复用（如计数器、进度条）- 无需复制粘贴代码，逻辑集中维护
- 无需 props 传递（组合函数封装内部状态）
五、TypeScript 类型推断优势
Vue3 的 Composition API天然支持 TypeScript，类型推断更精准。
Vue2 选项式（TypeScript 问题）
exportdefault{data(){return{count:0// 类型推断为 number}}}// 但 methods 中使用 this.count 时需显式声明类型Vue3 组合式（TypeScript 优势）
import{ref}from'vue';exportdefault{setup(){constcount=ref<number>(0);// 显式类型声明constincrement=()=>count.value++;return{count,increment};}}✅类型推断效果：
count.value自动推断为numberincrement()类型安全- IDE 代码提示更精准（如 VS Code）
六、实际开发中的最佳实践
1. 组合函数命名规范
- 前缀
use：useFetch、useLocalStorage（Vue 官方推荐） - 避免
use重复：如useUser而非useUserStore
2. 状态管理优化
// 用 reactive 替代多个 refconstuser=reactive({name:'',email:''});// 在模板中直接使用：{{ user.name }}3. 与 Vue2 选项式共存（过渡期）
<script> export default { setup() { // Vue3 Composition API 逻辑 const { count, increment } = useCounter(); return { count, increment }; }, methods: { // Vue2 选项式方法（过渡期保留） oldMethod() { /* ... */ } } } </script>⚠️注意：
setup()中不能使用this（Vue3 无this指向）
七、Composition API 与 Options API 对比图
✅可视化总结：
选项式→ 代码按 Vue 选项拆分
组合式→ 代码按功能逻辑聚合
八、常见陷阱与解决方案
| 陷阱 | 解决方案 |
|---|---|
误用this | 全程用ref.value，不依赖this |
| 组合函数未返回响应式对象 | 确保返回ref/reactive的响应式变量 |
在setup()外使用响应式变量 | 仅在setup()或setup()返回的函数中使用 |
| TypeScript 类型未声明 | 显式声明类型：const count = ref<number>(0) |
九、为什么 Composition API 是 Vue3 的核心革命？
| 维度 | Vue2 选项式 API | Vue3 Composition API |
|---|---|---|
| 代码组织 | 按 Vue 选项分散 | 按功能逻辑聚合 |
| 逻辑复用 | 困难（需复制/继承） | 简单（组合函数） |
| TypeScript 支持 | 弱（需大量this类型声明） | 强（精准类型推断） |
| 可测试性 | 低（依赖 Vue 实例） | 高（纯函数） |
| 学习成本 | 低（熟悉选项） | 中（需理解响应式原理） |
🌟尤雨溪原话：
“Composition API 让逻辑复用变得像函数调用一样自然。”
结语：拥抱组合式开发
Vue3 的 Composition API 不是简单的语法糖，而是重新定义了 Vue 组件的开发范式：
- ✅逻辑复用：通过组合函数实现“一次编写，多处使用”
- ✅类型安全：TypeScript 推断更精准，减少运行时错误
- ✅代码可读性：按功能组织代码，告别碎片化
立即行动建议：
- 新项目：直接使用 Composition API（
<script setup>语法更简洁）- 迁移 Vue2：将复杂组件逐步重构为 Composition API
- 学习资源：Vue3 Composition API 官方文档
参考资料：
- Vue3 TypeScript 支持最佳实践
- 尤雨溪：Composition API 的设计哲学
