Vue Options API
Vue 中按 data、methods、computed 等配置项组织组件逻辑的传统开发方式。
#tech / dev / frame
#resource / vue3
#type / concept
#status / growing
[!info] related notes
- 所属 MOC: Vue MOC
- 上位主题: vue3
- 并列概念: vue-composition-api
- 面试问法: vue-composition-api-vs-options-api-interview-question
Vue Options API
Options API 是 Vue 早期最经典的组件组织方式，它按配置项来拆分组件代码。
一句话定义
在 Options API 里，你通常会把状态放进 data，把方法放进 methods，把派生值放进 computed，把监听逻辑放进 watch。
最小例子
<script>
export default {
data() {
return { count: 0 }
},
computed: {
double() {
return this.count * 2
},
},
methods: {
increment() {
this.count++
},
},
}
</script>它的优点
- 上手直观
- 结构固定，适合入门
- 小组件里阅读成本低
它的局限
- 复杂组件里，同一功能相关代码会散落在多个配置项中
- 逻辑复用常依赖 mixin，一旦变复杂就容易来源不清
- TypeScript 和复杂逻辑组织通常不如 Composition API 自然
和 Composition API 的关系
Options API 不是“错误写法”，而是另一种组织方式。Vue3 依然支持它，只是中大型项目里很多团队更偏向 Composition API。
最短记忆方式
Options API 是按“代码类别”组织组件，Composition API 更偏按“功能”组织组件。