Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Options API？

options API就是大家常说的选项API，也就是以.vue为后缀名的文件，通过定义的methods，computed，watch，data等属性和方法，共同处理页面的逻辑

二、Composition API？

在vue3 的composition API中，组件根据逻辑功能来组织的，一个功能所定义所有的API会放在一起（更加的高内聚低耦合），也就是即使我们的项目很大，功能很多的时候，我们都能快速的定位到这个功能所用到的所有的API

三、对比区别？

1. Options API 是将组件的选项分散在不同的属性中，如 data、methods、computed、watch 等，而 Composition API 则是将组件的逻辑按照功能进行组合，使得代码更加清晰、易于维护。

2. Options API 中的 data、computed、watch 等属性都是在组件实例化时被初始化的，而 Composition API 中的响应式数据需要使用 ref 或 reactive 进行声明和初始化。

3. Options API 中的 methods 中的函数可以直接在模板中调用，而 Composition API 中的函数需要通过返回值暴露给模板使用。

4. Composition API 中的 setup 函数是在组件实例化之前执行的，可以用来进行一些初始化操作，而 Options API 中的 created、mounted 等生命周期函数是在组件实例化之后执行的。

---

总结

Composition API 更加灵活，可以更好地组织组件逻辑，使得代码更加清晰、易于维护。但是需要注意的是，Composition API 目前还处于实验阶段，可能会有一些变化。