DAY 6 - Option API 進化 Compisiton API

學習目標 : 從 Option API 進化 Compisiton API ，從了解基礎寫法差異到運用，了解為什麼要學Compisiton API，究竟有什麼優勢呢？熟悉後可以慢慢改用 Compisiton API 來寫，讓專案更好維護。

目錄

• 一、基礎寫法差異
• 二、Option api
• 三、Compisiton API

一、基礎寫法差異

Option API (選項式 API) :
在Vue2中主要會以 Option API為主要寫法，會將data、methods、computed、computed、component各自獨立分開，讓區塊區隔很明顯，在初期開發上十分便利，但是長期難以維護(下圖)。

Compisiton API，(組合式 API) :
在option長期維護下，容易出現義大利麵程式碼，且難以維護重複使用，所以誕生了Compisiton API，值得注意的是官方為了讓Vue2的也能體驗到 Compisiton API 的魅力，所以在2.7版也能使用 (官方2.7升級文件)

可以看到 template 寫法上沒有差異太大，雙括號 {{ }} 一樣顯示資料文字，但是在script 上寫法就差異很大了。

二、Option api

依照程式的類型分割程式碼，會有各自對應擺放位置 :

• Data - 存放資料的地方
• methods - 函式、程式
• computed - 加工、計算
• watch - 監聽
• mounted - 執行

Option API 中 的 this 運用
this 指向在 Option api 會特別重要需要注意this指向， this 在這邊指向的是 Vue 本身，所以如果用 Option api寫法，要用this去調用裡面的參數。

利用 $ref 取得資料
可以在html標籤加入ref = "名稱"，並透過$ref取得資料，下面為範例取得ref=text上面的value值，最後成功得到"文字"(在Compisiton API就不會這樣寫了)

缺點 :

• 邏輯分散各地不像一般在寫程式相關邏輯寫一起，程式碼較難以閱讀、專案結構一大就難維護
• 重複性元件 mixin 使用過多，很難追蹤引入地方，使用上不直覺
• 容易產生義大利麵程式碼，會產生很多後續維護上問題
  　

三、Compisiton API

按邏輯來區分程式碼，較自由且維護上因緊密較好維護修改， 在Vue3 裡我們將變更寫法加入 setup()，不再區分區塊，而是更自由的像一般寫程式一樣去撰寫，所有相關的都會包在setup裡面，也有<script setup>語法糖的誕生。

setup()取代舊有寫法，ref取代data資料
我們來看看官方文件的範例，將舊有寫法拿掉，不再區分區塊，包在setup()裡，並透過ref宣告資料，在渲染至畫面

使用 Script Setup 語法糖
<script setup>又是什麼呢? 跟 setup() 不一樣嗎，其實他就是Vue3的語法糖的一種，跟setup其實是一樣東西只是把它簡化了，不需要再 return，寫法上更直覺一點

在 上直接加入 setup，就可以在裡面撰寫程式碼，省去繁瑣的return，也讓程式碼更乾淨

今天簡單介紹了下 Option api 及 Compisiton API 寫法上差異，以維護性來說Compisiton API程式碼邏輯更緊密，寫法上更自由，勢必是未來趨勢，不要再寫又臭又長的Code了，快來用看看 Compisiton API !!

那接下來這30天寫法都會以 Vue3 Compisiton API 寫法為主，如果有想了解 Vue2 的寫法可以再去他官方文件查看，都有很詳盡的教學文件