SVG 通常會搭配 CSS Animation 做動畫，效能很不錯。但問題來了，如果設計師給一張很複雜的 SVG Banner 圖，需要只動裡面其中幾個物件，那使用 JS 會比較方便，就不用每張切圖對 x,y 位置，且 JS 能撰寫比較多使用者互動。這次就來測試使用 SVG.js 做動畫。

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

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

最近 10 月份 Figma 團隊出的 Interative Components Youtube 教學影片，讓我對這個新功能感到很興奮。簡單來說，就是 Checkbox, Radio, Switch… 等元件，可以製作獨立的動畫，讓 user 透過互動看到切換狀態的過程。話不多說，立刻就來試試看。

最近發現公司內網不明原因會擋住 npm install cypress，但安裝其他的套件就不會發生，所以只好搜尋看要怎麼手動安裝 cypress。

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

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

繼續看 Composition API 的 Reactive and toRefs。

.NET 5 之後會將 dotnet 各 platform 整合起來，且 dotnet 3.1 cshtml HMR 的 extension 功能被官方強迫棄用，目前我看各方文章感覺還沒有一個很好的升級方式。要馬就是改用網友寫的 Vue-Cli，把 config 轉到 cli，要馬就是 Nuget 套件改用網友寫的。我自己參考國外文章，是有人用 Vite 做到用 index.cshtml 的 HMR: 這篇。但是因為公司內部還是有 IE 瀏覽器且 Vite 相關套件還沒有到完整，沒辦法放棄使用 webpack，只好參考這篇嘗試用 webpack HMR，很不幸的，若照文章模仿雖然 HMR 字眼有出現，但一直沒有正常作用，胡亂嘗試了一番，勉強用奇怪的方式有做到 Auto Reload，但沒有 HMR 效果就不太滿意。目前先將這些研究文章和亂試的方式記錄下來。

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