使用 Template Reference 取得 DOM Element
實務上 Vue 應該盡量使用 Model-based 寫法，專心處理 Data，HTML 則由 Vue 處理，但若想透過 DOM Element 處理，此時可使用 Template Reference。
タグ : Vue
如何計算圖片的 Base64 ?
使用 File Upload 選擇圖片後，接著會將檔案轉成 Base64 String 透過 API 上傳，該如何將檔案轉成 Base64 String 呢 ?
使用 Module 取代 Vuex
Vue 2 若要 Component 間共享 State，Vuex 算是最簡單方式，但若需求簡單，則 Vuex 又過於麻煩，Vue 3 可簡單使用 Module 取代 Vuex。
使用 eject 發出 Event
Vue 3 以 emit 發出 Event，但這種方式不方便 Point-free，Vue3-fp 提供了 eject 將 emit 轉成適合 Point-free 版本。
使用 init 建立 onMounted Hook
Vue 3 希望我們使用 onMounted 建立 onMounted hook，但這種方式不方便 Point-free，Vue3-fp 提供了 Curry Function 版本的 init。
使用 mark 讀取 Prop
Vue 3 要以 props.name 形式讀取 prop，但這種方式不方便 Point-free，Vue3-fp 提供了 Curry Function 版本的 mark。
使用 guardEffect 自動重新執行 Side Effect
Vue 3 希望我們使用 watchEffect 自動重新執行 Side Effect，但這種方式不方便 Point-free，Vue3-fp 提供了 Curry Function 版本的 guardEffect。
使用 guard 建立 Watch
Vue 3 以 watch 讀取 State，但這種方式不方便 Point-free，Vue3-fp 提供了 Curry Function 版本的 guard。
使用 calculated 建立 Computed
Vue 3 希望我們使用 computed 建立 Computed，但這種方式不方便 Point-free，Vue3-fp 提供了 Curry Function 版本的 calculated。
使用 write 寫入 State
Vue 3 希望我們使用 .value 寫入 State 內部值，但這種方式不方便 Point-free，Vue3-fp 提供了 Curry Function 版本的 write。
使用 read 讀取 State
Vue 3 希望我們使用 .value 讀取 State，但這種方式不方便 Point-free，Vue3-fp 提供了 Curry Function 版本的 read。
如何從 Object 取出 Property 寫入 State ?
一般會從 API 取出 Value 後再寫入 State，但也可只取出 Object，再透過 ap 從 Object 取出 Property 並寫入 State。
如何不選擇子目錄的檔案 ?
當使用 input(type='file', webkitdirectory) 選取目錄下的檔案時，預設會連子目錄下的檔案一起選取，該如何不選取子目錄下的檔案呢 ?
如何使 API 大於 1 秒鐘才顯示 Spinner ?
由於 API 會受網路狀況影響，因此希望 Response Time 大於 1 秒才顯示 Spinner，且若顯示 Spinner 後也不要立即隱藏，最少顯示 0.5 秒，這種需求該如何實現呢 ?
當 Either 遇見 Future
當有 Function 回傳 Either，而後續的 Function 都在 Either 內執行時，卻又有 Function 回傳 Future，這就造成 Either 內有 Future 窘境，實務上該如何處理這種兩層 Monad 呢 ?
當 Maybe 遇見 Future
當有 Function 回傳 Maybe，而後續的 Function 都在 Maybe 內執行時，卻又有 Function 回傳 Future，這就造成 Maybe 內有 Future 窘境，實務上該如何處理這種兩層 Monad 呢 ?
使用 Future 處理 Error Response
RESTful API 除了回傳 200 HTTP Status 與內容外，也會回傳 Error Response 與 Data，Vue 該如何正確處理呢 ?
使用 Future 處理 GET 回傳 Array Object
處理 RESTful API 的 GET 回傳 Array Object 在實務上一定會碰到，傳統會使用 Promise 處理，事實上 Future 更適合 Point-free。
使用 Future 處理 GET 回傳 Primitive
處理 RESTful API 的 GET 回傳 Primitive 在實務上一定會碰到，傳統會使用 Promise 處理，事實上 Future 更適合 Point-free。
使用 Promise 處理 Error Response
RESTful API 除了回傳 200 HTTP Status 與內容外，也會回傳 Error Response 與 Data，Vue 該如何正確處理呢 ?
使用 Promise 處理 POST
實務上常遇到 API 需要以 POST 以 Body 傳入，由於 Composition API 沒有使用 this，在 Vue 3 將有不同處理方式。
使用 Promise 處理 GET 回傳 Object Array
處理 RESTful API 的 GET 回傳 Object Array 在實務上一定會碰到，由於 Composition API 沒有使用 this，在 Vue 3 將有不同處理方式。
使用 Promise 處理 GET 回傳 Primitive
處理 RESTful API 的 GET 回傳 Primitive 在實務上一定會碰到，由於 Composition API 沒有使用 this，在 Vue 3 將有不同處理方式。
使用 Promise.all() 處理 Promise Array
若 API 遵循 RESTful 精神設計，常會第一個 API 僅回傳 id Array，若要取得其他值就要呼叫第二個 API，這就形成了 Promise Array，這種實務上常見需求該如何解決呢 ?
以 * 使用 Scoped CSS Variable
若將 CSS Variable 寫在 :root 下，則不能使用 <style scoped>，但其 Side Effect 超大，可改寫在 * 底下。
綁定 CSS Variable
若有數值在 CSS 重複出現，我們可將其抽成 CSS Variable，將來只需維護一處即可：若能將 JavaScript Variable 與 CSS Variable 綁定，則可使用 JavaScript 動態改變 CSS。
使用 Once Event Modifier 只觸發 Event 一次
實務上有些需求只希望 User 只能 Click Button 一次，之後任何 Click 都忽略不計，此時可使用 once Event Modifier 達成。
使用 v-for 搭配 Object
當使用 v-for 顯示重複資料時，直覺都會想到 Array，事實上 ECMAScript 的 Object 也是一種 Container，而 v-for 也支援 Object，在有些情境使用 Object 會比 Array 方便。
使用 v-for 動態加入 Component
實務上有時候 UI 不見的一開始就有全部 Component，而是 User 按下 Button 才會動態加入，在 Vue 3 只要使用簡單的 v-for 就可完成。
使用 FitAddon 讓 Xterm.js 也能 RWD
實務上會遇到很長的 Log 必須在 Xterm.js 顯示，且由於 Browser 的 RWD 特性，要如何讓 Xterm.js 能根據各種寬度改變是很大挑戰。