选项式API（Options API）
Vue2 原生写法，Vue3 兼容。把代码按功能拆分到固定选项中：data、methods、computed、watch、mounted 等。
例子
<script>
export default {
// 数据
data() {
return { count: 0 }
},
// 方法
methods: {
add() { this.count++ }
},
}
</script>
优点
- 入门简单，结构固定，新手易读；
- 小型页面、简单组件写起来快捷；
- Vue2 项目无缝迁移，无学习成本。
缺点
- 大型组件逻辑分散：比如上面代码，实现一个功能，在
data()中定义变量，在methods中定义方法等等，即：实现一个功能，代码要散落各处，来回翻代码； - TS 类型支持差，复杂类型编写繁琐；
- 依赖
this，回调、箭头函数容易踩坑。
组合式API（Composition API）
Vue3 新增核心，以逻辑功能为单位聚合代码，核心两种写法：
<script setup>（语法糖，推荐）- 原生
setup()函数
例子
<script setup>
import { ref, computed, onMounted } from 'vue'
// 数据
const count = ref(0)
// 方法
const add = () => count.value++
</script>
优点
- 逻辑聚合：同一个业务功能的变量、方法、写在一起，可读性极强；、
- 完美适配 TS，类型自动推导；
- 无
this，减少上下文错误； - 编译阶段语法糖，性能更好，代码更简洁。
缺点
- 入门门槛更高，需要理解
ref/reactive/computed/watch等响应式API； - 极简小组件会比选项式代码稍多；
- Vue2 项目不支持，只能Vue3使用。
对比
| 维度 | 选项式API | 组合式API（script setup） |
|---|---|---|
| 代码组织 | 按类型拆分（数据/方法/生命周期分开） | 按业务逻辑聚合（同一功能代码放一起） |
| 复用逻辑 | 依赖 mixins，存在命名冲突、来源模糊问题 | 自定义 hooks 抽离逻辑，无冲突，清晰易复用 |
| TypeScript 支持 | 类型推导弱，复杂场景需额外处理 | 天然友好，变量类型直接推断 |
| 代码体量 | 简单组件简洁，复杂组件臃肿 | 大型组件结构清晰，维护成本低 |
| this 指向 | 大量使用 this，容易丢失上下文 |
无 this，直接操作变量，不易出错 |
| 学习成本 | 上手简单，Vue2 开发者零门槛 | 需要掌握响应式API（ref/reactive等） |
| 作用域 | 所有选项挂载实例，全局互通 | 变量手动导出到模板，隔离性更好 |
适用场景
优先用 选项式API
- 简单小型组件、弹窗、展示类小组件；
- Vue2 老项目维护、快速简单页面；
- 新手入门学习，追求极简写法。
优先用 组合式API（<script setup>）
- 中大型后台管理系统、复杂业务页面；
- 需要大量复用通用逻辑（表单、分页、权限、接口请求）；
- 使用 TypeScript 开发；
- 长期维护、多人协作的项目（官方推荐标准写法）。
官方建议
Vue3 官方推荐新项目统一使用 <script setup> 组合式API；
原有小型简单组件可以保留选项式API，两种写法可以在同一个项目共存，互不冲突。