Vue 3 Studies - Setup & Reactive References
上一篇我們提到為什麼使用 composition API，這次要複習在何時使用並介紹 Setup & Reactive References 的使用方式。
影片網址： https://www.vuemastery.com/courses/vue-3-essentials/setup-and-reactive-references
什麼時候要用 composition API？
影片中再次強調 composition API 只是多一種選擇的程式寫法，舊有的 Vue 2 寫法還是可以完完全全繼續使用。那我們什麼時候可以用 composition API 呢？
- 當專案想要使用強型別寫法，將可以順利支援 typescript。
- 當組件過於龐大，需要用功能來重新組織程式架構。
- 部分功能的程式需要在不同組件中重複使用。
Setup & Reactive References
我們來看看一般 Vue 2 寫法如下，畫面會顯示 data return 的 capacity 3。
那在 composition API 要怎麼寫呢？我們使用 setup function，他觸發時機會在 components, props, data, methods, computed properties, lifecycle methods 之前，且他是沒辦法用 this 抓到自己這個組件。
Setup 可以放兩個參數，先介紹第一個參數用法。第一個參數是 props ，他一樣是 reactive 且 可以使用 watch 監聽改變事件如下圖。
Setup 第二個參數是 context，剛剛說在 setup 裡面不能用 this 抓取自己這個組件，所以第二個參數 context 就是拿來取得自己這個組件的內容，就相當於以前的 this。
我們回頭來看看 setup 要怎麼寫。我們會令一個常數 capacity 是 ref(3)，這邊的 ref 是 reactive reference function。這邊將我們的原始值包在一個物件當中，相當於 Vue 2 我們將值包在data返回的物件中。這邊要注意的是：用 composition API 也可以造不跟此組件相關的 reactive 物件。這邊影片當中說這是個好處，但不確定好處是在哪裡？可能要等以後遇到對應的情境才會解釋。
最後，我們將要關聯 template 的變數和函數 return 出來。雖然這寫法很冗長，但他讓我們的程式更容易維護。我們可以控制讓哪些變數或函式輸出，也可以追蹤屬性是從哪裡定義的。
Vue 2 也可以使用 composition API
如果我們想要在 Vue 2 使用 composition API，可以如下圖安裝進來。我覺得設計者設想的很周到，不過礙於目前專案開發者程度參差不齊，我應該也是等到Vue 3 出正式版且vuetify 有更新框架後，才會考慮開始用在工作上的專案。
