尚硅谷Vue3入门到实战 —— 04 OptionsAPI 与 CompositionAPI

我们看一下上一节的代码，如下：

<template><div class="person"><h2>姓名： {{ name }}</h2><h2>年龄： {{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel"> 查看联系方式 </button></div></template><script lang="ts">
export default {name: 'Person',data() {return {name: '张三',age: 18,tel: '13888888888'}},methods: {changeName() {this.name = "zhangSan"},changeAge() {this.age += 1;},showTel() {alert(this.tel);}}
}
</script><style scoped>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}button {margin: 0px 5px;
}
</style>

组件使用的数据都保存在 data 中；
组件使用的方法都保存在 methods 中；

这里的编程风格为 OptionsAPI，name、data、methos 都是一个选项/配置项，我们在学习 vue2 就是在学习各种配置项，但是这种写法存在一些问题；

官网上有具体的描述，下面我们来简单对比一下【optionsAPI】和【CompositionAPI】：

vue2 的 API 设计是 Options（配置）风格的；
vue3 的 API 设计是 Composition（组合）风格的；

Options API ：

Options 类型的 API，数据、方法、计算属性等，是分散在 data、methods、computed 中的，若想新增或者修改一个需求，就需要分别修改 data、methos、computed，不方便维护和复用；

（以上动图源自大帅老猿，非个人所有，无意冒犯）
优点：
- 简单易学：Options API 使用对象语法，结构清晰，容易上手，特别适合初学者；
- 清晰的逻辑分离：不同的选项（如 data、methods、computed 等）在代码中有明确的分离，便于理解和维护；
- 广泛使用：在 Vue 2 中广泛使用，社区资源丰富，文档和教程也多；
缺点：
- 逻辑分散：当组件变得复杂时，相关逻辑可能会分散在不同的选项中，导致代码难以维护；
- 复用性差：在 Options API 中，复用逻辑通常依赖于 mixins 或者高阶组件，这些方法有时会导致命名冲突和代码难以理解；

Composition API：

可以用函数的方式，更加优雅地组织代码，让相关功能的代码更加有序地组合在一起：

（以上动图源自大帅老猿，非个人所有，无意冒犯）
优点：
- 逻辑集中：通过组合函数（composition functions），可以将相关逻辑集中在一起，使代码更易于理解和维护；
- 更好的复用性：Composition API 提供了更灵活的逻辑复用方式，可以通过组合函数轻松地复用代码；
- 类型支持：更好地支持 TypeScript，提供更强的类型推断和类型检查；
- 灵活性：可以在同一个 setup 函数中使用多个组合函数，提供更大的灵活性和可组合性；
缺点：
- 学习曲线：对于初学者来说，Composition API 的概念和语法可能比较复杂，需要一定的学习成本；
- 代码结构：由于所有逻辑都集中在 setup 函数中，可能导致 setup 函数变得过于庞大，需要额外的组织和管理；