vue3的选项式与组合式

---

选项式Api

选项式 API 是 Vue 2 和 Vue 3 均支持的传统组件编写方式，根据选项来存放相应代码
如下

export default {// 数据选项data() {return {count: 0,message: 'Hello Vue!'}},// 计算属性选项computed: {doubled() {return this.count * 2}},// 方法选项methods: {increment() {this.count++}},
}

相关逻辑分散在不同的选项中
数据在 data 中，方法在 methods 中，计算属性在 computed 中

特点

• 结构清晰：代码按功能分类（data、methods、computed 等），适合新手理解。
• 逻辑分散：每个选项只关注自己的职责（如 methods 只存放方法）。
• 更适合小组件：随着组件复杂度增加，data、methods 等选项会变得很长，难以维护。

组合式Api

是一系列 API 的集合，使用setup函数作为组件的入口点。使用函数而不是声明选项的方式书写 Vue 组件，相比选项式逻辑更集中

import { ref, computed, onMounted } from 'vue'export default {setup() {// 响应式状态const count = ref(0)const message = ref('Hello Vue!')// 计算属性const doubled = computed(() => count.value * 2)// 方法function increment() {count.value++}// 返回模板可用的内容return {count,message,doubled,increment}}
}

特点

• 更好的 TypeScript 支持：变量和函数类型更容易推断。
• 代码组织更灵活：可以按功能（而不是选项）组织代码，提高可维护性。

但在小组件中显得更繁琐

特性	选项式 API (Options API)	组合式 API (Composition API)
代码组织方式	按选项类型组织代码（data、methods、computed 等）	按逻辑功能组织代码，相关逻辑集中在一起
逻辑复用	使用 mixins 或高阶组件	使用自定义组合式函数，更好的类型推断和明确来源
TypeScript 支持	需要额外的类型标注，支持有限	原生支持 TypeScript，提供更好的类型推断
响应式数据声明	通过 data() 选项返回对象	使用 ref() 或 reactive() 函数声明
计算属性	通过 computed 选项定义	使用 computed() 函数定义
生命周期钩子	作为选项直接使用（如 mounted）	通过导入使用（如 onMounted）
this 上下文	使用 this 访问组件实例	没有 this，通过函数参数传递上下文
代码可读性	选项分离，但相关逻辑可能分散	相关逻辑集中，但需要良好组织
灵活性	相对固定，遵循 Vue 的选项结构	更高灵活性，可以像普通函数一样组织代码

总结

选项式 API 和组合式 API 各有其优势和适用场景。选项式 API 提供了一种结构简单、易于学习的方式，适合小型项目和新手开发者。组合式 API 则提供了更好的逻辑组织、复用和类型支持，适合大型复杂应用。

Vue 3 同时支持这两种 API 风格，开发者可以根据项目需求和个人偏好灵活选择。在实际开发中，甚至可以混合使用两种 API，在同一个项目中根据组件的复杂程度选择最合适的 API 风格。

无论选择哪种 API，理解其背后的设计理念和最佳实践都是编写高质量 Vue 应用的关键。随着 Vue 生态的发展，组合式 API 正成为越来越主流的选择，特别是对于新项目和需要长期维护的大型应用。