# Vue學習#17 option Api & composition Api 概念
###### tags: `Vue 直播班 - 2022 春季班`

## options Api
### 所有功能依照程式邏輯區分

以往在撰寫 JS 上 很多函式變數都是寫再一起很雜亂的

options Api 則利用屬性與方法，讓你明確的寫在固定的地方

比如:
1. data() 就是負責將變數寫在這一區
2. methods 負責寫 function
3. mounted 就是負責元件的生命週期

下圖為 options Api 的結構圖

### options Api 優點
明確的屬性區分，學習或使用上相對容易
### options Api 缺點
當元件程式撰寫的越來越多時，對應的屬性( ex: methods )，就會越寫越多越複雜難理解

## composition Api
### 依照程式邏輯撰寫

不用像 options Api 有明確的程式屬性區分 ( methods 、 data ) 來做撰寫
所有的內容都寫在 `setup` 中，可以依照功能來區分寫的區塊，甚至可以將 function 寫在外面，再放到 setup() 來組裝起來，若有需要用在 template 的 function 或 data 就需要 return 才可以使用

下圖為 composition Api 的結構圖

## options Api 與 composition Api 的概念圖

## 參考

[什麼是 Composition API](https://hoyis-note.coderbridge.io/2021/08/17/%E4%BB%80%E9%BA%BC%E6%98%AF-composition-api/)
[What is Composition API?](https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api)