【vue】选项式api与组合式api

Vue 选项式 API 与组合式 API 的对比与选择指南2025–2026 视角Vue 目前Vue 3 Vue 3.5同时支持两种主要代码组织方式选项式 APIOptions API—— Vue 2 的经典写法Vue 3 完全兼容组合式 APIComposition API—— Vue 3 引入的新范式script setup是其最常用语法糖下面用真实场景对比的方式帮助你清晰理解两者的差异、优缺点以及实际项目中该如何选择。1. 核心对比表格2025–2026 真实项目视角维度选项式 API (Options API)组合式 API (Composition API) script setup胜出方大多数场景代码组织方式按“选项”分组data、methods、computed、watch…按“逻辑关注点”自由组合组合式逻辑复用能力mixin、extends容易命名冲突、来源不清晰composable 函数清晰、类型友好、可树摇组合式 ★★★★★TypeScript 支持中等需要大量 as any 或类型断言极好类型推导优秀ref/reactive 天然支持组合式 ★★★★★代码量中大型组件较多setup 里逻辑分散在不同选项更少、更紧凑相关逻辑写在一起组合式学习曲线新手较低结构固定容易理解“什么放在哪里”较高需要理解 ref、reactive、toRefs、生命周期钩子选项式初期学习曲线有经验者中等大型组件容易变成“意大利面条”较低逻辑清晰可读性高组合式性能几乎相同几乎相同script setup甚至稍有编译期优化平手社区趋势2025–2026仍然大量维护中的老项目在使用新项目、官方文档、VitePress、Nuxt 3、Element Plus 等主流库默认推荐组合式官方推荐兼容并继续支持但新功能优先在组合式中实现官方主推未来新特性如script setup的宏优先组合式2. 代码对比同一个功能两种写法需求一个计数器组件支持显示 count双倍计算属性 doublewatch count 变化打印日志按钮 1、-1选项式 APIVue 2 / Vue 3 兼容写法template div pCount: {{ count }}/p pDouble: {{ double }}/p button clickincrement1/button button clickdecrement-1/button /div /template script export default { data() { return { count: 0 } }, computed: { double() { return this.count * 2 } }, watch: { count(newVal, oldVal) { console.log(count 从 ${oldVal} 变为 ${newVal}) } }, methods: { increment() { this.count }, decrement() { this.count-- } }, mounted() { console.log(组件挂载完成) } } /script组合式 API script setupVue 3 推荐写法template div pCount: {{ count }}/p pDouble: {{ double }}/p button clickincrement1/button button clickdecrement-1/button /div /template script setup import { ref, computed, watch, onMounted } from vue // 响应式状态 const count ref(0) // 计算属性 const double computed(() count.value * 2) // 方法 const increment () count.value const decrement () count.value-- // 侦听器 watch(count, (newVal, oldVal) { console.log(count 从 ${oldVal} 变为 ${newVal}) }) // 生命周期 onMounted(() { console.log(组件挂载完成) }) /script3. 组合式 API 的真正优势在“中大型组件”和“逻辑复用”真实场景对比一个包含表单校验、远程搜索、分页、权限控制的“用户管理表格”组件选项式写法很容易出现data 里 20 个属性methods 里 15 个方法watch 里散落多个侦听器生命周期钩子重复写相似的逻辑组合式写法可以把相关逻辑聚合在一起script setup import { ref, watch, onMounted } from vue import { useForm } from /composables/useForm import { useTable } from /composables/useTable import { usePermission } from /composables/usePermission // 表单逻辑 const { form, validate, resetForm } useForm() // 表格逻辑 const { dataSource, pagination, fetchData, loading } useTable() // 权限逻辑 const { hasEditPerm, hasDeletePerm } usePermission(user:manage) // 统一加载数据 onMounted(fetchData) /script→ 每个 composable 函数都是可独立测试、可复用、可类型推导的模块。4. 2025–2026 年实际项目中的选择建议项目类型推荐写法理由简述全新项目Vue 3组合式 script setup官方主推、生态最好、类型支持最强维护中的 Vue 2 项目继续选项式最小改动成本Vue 2 → Vue 3 迁移项目选项式 组合式 混用逐步把复杂组件改成组合式中大型组件200行强烈推荐组合式逻辑组织清晰度差距非常明显需要大量逻辑复用组合式composablemixin 几乎被淘汰团队新手较多先用选项式逐步过渡学习曲线更平滑追求极致开发体验 TS组合式 script setup当前最佳实践5. 快速判断我该用哪一种问自己这几个问题按优先级组件是否已经/即将超过 150–200 行→ 是 → 组合式是否大量使用 TypeScript→ 是 → 组合式是否需要把一段逻辑在多个组件复用→ 是 → 组合式composable团队大部分人 Vue 2 经验丰富但 Vue 3 刚上手→ 先选项式逐步过渡是全新项目或新模块→ 组合式大多数现代 Vue 3 项目尤其是 2024 年后新建的已经默认使用script setup 组合式 API。如果你现在还在犹豫可以先在一个新页面/新组件里尝试用script setup写一次感受一下逻辑组织上的差异大部分人写过 2–3 个组件后就会倾向于组合式。有具体组件代码想对比两种写法或者想看某个典型场景表单 表格 弹窗的组合式写法示例吗可以直接贴代码或描述需求