Suspense 這個元件是 Vue 參考 React 那邊所得到的靈感。當我們打開頁面時，通常會有多個非同步的 API 呼叫，出現 Loading 中，等到資料都到齊，才會看到完整的頁面。以往都是用 v-if 來判別 data 是否都到齊，在 Vue 3 中就能用 Suspense 元件來做這件事情，且多個非同步的 API 也能自動判別，非常省時省力。

當我們在呼叫 API 後，通常會有很多後續的功能接續運作，例如：更換狀態、顯示錯誤訊息、使用 try catch blocks 等等。來看看這個搜尋範例是怎麼把程式碼抽取出來。

如果 Watch 在 composition API 要怎麼使用呢？我們一起來看看。

使用 Composition API 有兩個主要的原因，一個原因是把 component 依據功能重新組織，另一個主要原因是這些程式碼可以跨不同 component 重複利用。我們來看一下範例。

繼續看 Composition API 的 Reactive and toRefs。

今年四月信箱發現 Vue Mastery 又開放幾天全部課程免費的消息，所以趕快把之前沒看到的 Vue 3 Composition API 給補看起來！！

因為官方的資源部分要付費，所以去 YouTube 找了一些可延伸學習的內容來看看。這次找到關於 Reactivity 更深入一點的用法。

新功能 teleport 讓我們可以很輕鬆的將 HTML render 在 app 以外的地方，且不影響商業邏輯的整理，趕緊來看看吧！

因為上一篇課程後連續四個影片都要付費觀看，所以我們這篇先跳著寫 lifecycle 的部分，等之後有其他免費的學習資源再來補上。

上一篇我們提到為什麼使用 composition API，這次要複習在何時使用並介紹 Setup & Reactive References 的使用方式。