最近 Figma 功能換到團隊的訂閱制，終於可以使用 Library 的功能了！但之前還沒換過去之前，檔案內的 Components 都是在 Local 原檔案中，現在該是 Refactor 整理的時候了，把共用的 Components 改用 Library 的，並重新整理檔案。此篇紀錄其中碰到的問題並寫出使用了哪些 Plugin 來改善 Refactor 的效率。

.NET 出到 6 之後，原本官方的 SPA 套件被棄用，新版改成使用 Vue-CLI + SPA Proxy。我們就從零開始建立新的 .NET6 + Vue-CLI (Webpack base) + Vuetify 專案吧～

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。