>[success] # Option API VS Composition API 1. `3.x` 最核心的變化提供了`Composition Api` >[info] ## 什么是Option API 1. 之前在`2.x `系列我們的寫法可以成為`Option API`簡根據配置項去按照規則將對應代碼放到對應的配置項中,對應的產生了三個問題 * 隨著組件變得更大的可讀性變得越來越困難尤其大型組件 * 不利于代碼重用，即使有`Mixins`方案整體也有一些問題 * `Vue 2`提供了有限的TypeScript支持 >[danger] ##### 大型組件可能難以閱讀和維護 1. 我們的功能包含的代碼需要將所有組件選項(**data,method,computed,聲明周期等**)之間進行拆分。就像下圖一樣**從而使我們的組件更難以閱讀和解析哪個功能代碼與哪個功能一起使用** * [圖片來自 ](https://juejin.cn/post/6890545920883032071)  * 官方圖片  >[danger] ##### 組件之間重用 1. `2.x` 也提供了三種重用解決方案**Mixins,Mixin工廠,作用域插槽** >[info] ## 為什么出現Composition Api 1. v`composition api` 就可以讓同一個功能的代碼放到一起，查看修改的時候不用一個文件到處跳 2. `composition api` 優點 * `Composition API` 是根據邏輯相關性組織代碼的，提高可讀性和可維護性 * 基于函數組合的 API 更好的重用邏輯代碼（**在vue2 Options API中通過Mixins重用邏輯代碼，容易發生命名沖突且關系不清**） >[danger] ##### Composition Api 解決大型組件維護問題 1. 如果將功能代碼保持在一起這樣代碼**可讀性、可維護性**，`3.x`提供了新api `setup`,這是一個可選的也就是說`3.x `是同時支持`Composition Api` 和`Option API`兩種編寫習慣的 2. 如果將代碼都構建在`setup`中，是否會出現一個龐大的`setup`冗雜這各種邏輯在里面，這個問題不用擔心如圖給出的方案會將**功能分組為可通過設置方法調用的組合功能** * [圖片來自 ](https://juejin.cn/post/6890545920883032071)  * [圖二來自](https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api)  >[info] ## 3.x 我應該用那種來寫 1. 官方的課程也給了建議，如果你滿足下面其中一點說明你要使用`setup`了 * 您需要最佳的TypeScript支持。 * 組件太大，需要按功能進行組織。 * 需要在其他組件之間重用代碼。 * 您和您的團隊更喜歡替代語法。 >[danger] ##### 內容來源參考 [vuemastery](https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api) >[danger] ##### 更詳細內容 [尤雨溪在乎的文章](https://zhuanlan.zhihu.com/p/68477600) [# 組合式 API 常見問答](https://cn.vuejs.org/guide/extras/composition-api-faq.html)