文科少女學程式

這陣子為了開發新功能，主要都在接觸Vue3，前陣子也在公司內聽了前輩大大準備的Vue3分享，所以這次想要針對Vue2的Options API和Vue3的Composition API寫一篇學習紀錄。

為什麼Vue3加入了Composition API？
在Vue3中，依然可以使用Options API，但為了以下幾個部分，所以在Vue3加入了Compositon API。
1. 提高對TypeScript更好的支援度。
2. 增加元件的易維護性。
3. 讓功能被拆分出來並能重複利用。

Options API的寫法
在Vue2中，元件內在data區塊擺放狀態資料，在methods寫功能邏輯，就是Options API呈現的元件內容。雖然資料被放到一個區塊，功能邏輯被放到另一個區塊，看似有做一個分類，但若想要維護單個功能，就需要在好幾個區塊中，找到對應的資料或是方法進行修改，這也就讓想進行維護修改時，沒那麼便利。


即使是跟某一個功能有關的資料或methods，還是必須被拆分到data、methods裡面。

Compositon API的寫法
透過Composition API，不再需要把資料和方法拆到各個地方，也就是說不再需要寫data、methods區塊，所有的內容都可以直接寫在setup裡面就好，這樣也就可以用功能來區分寫的區塊，甚至可以把function抽出來放在setup外面，再放到setup裡面組起來，但若有需要使用再template的方法或資料，需要用return傳出來才可以使用。


進一步了解Composition API - setup


大概了解了差異性後，接著來看看Composition API裡面的重點，也就是setup。
可以參考上圖，搭配下列的文字敘述一起看。
1. setup的調用時間點
調用的時間點與生命週期裡的beforeCreate一樣，都是在實例尚未被創建時被調用。
2.setup可帶入的函數
使用setup時，可以帶入兩個函數，分別是props和context。
(1)props：響應式，不可解構。
這邊的props，就跟大家在Vue2時，常常使用到的props一樣，當父元件有帶props給子元件時，在子元件裡，要在setup中使用props時，就必須在setup帶入這個參數。
(2)context：非響應式，是一個物件，可解構成attrs、slots、emit這三個屬性。
attrs是沒被接到props上的資料，若沒有正確接到從父元件傳來的props，就會顯示成attrs；slots是元件的插槽；emit則是在Vue2裡面的emit，必須在setup中帶入emit屬性，才可以在setup裡面使用emit，讓子元件可以把值和事件傳回父元件。
注意！！在Vue3裡，雖然導入了Composition API，但依然可以使用Vue2 Options API的寫法，但是裡面的data、methods等內容無法使用在setup裡面。

以上就是這次紀錄的學習內容，關於Vue3還有一個可以好好來了解一下的ref和reactive，這部分就留到下次再來記錄了！
如果上述內容有錯誤的地方，歡迎大家留言跟我討論，這次就先到這裡了，大家掰餔^^