タグ : Vue
VAD 整合 Vue 與 Webpack
VAD 亦可搭配 Vue 與 Webpack 使用，唯 VAD 除了 JavaScript 外，還需要其他 WASM 檔案，需在 Webpack 做額外的設定。
使用 toRefs() 對 Reactive Object 解構
Vue 提供了 reactive() 建立 Reactive Object，但卻無法使用 ES6 的 Object Destructure 將其解構，因此另外提出了 toRefs() 彌補此缺憾。
使用 toRef() 將 Reactive Object 轉成 Reactive Reference
若原本使用 reactive() 建立 Reactive Object，之後因需求不同想根據其 Property 建立 Reactive Reference 並維持其 Reactivity，可使用 toRef() 加以轉換。
Hash Mode vs. HTML 5 Mode
當切換 URL 時，Vue Router 會避免對 Server 發出 Request ，直接由 JavaScript 去 render HTML，在 HTML 5 之前會使用 Hash Mode，現在會使用 HTML 5 Mode。
由 Vite 建立 Vue Router 專案
由於並不是所有的應用都會使用 Vue Router，因此 Vue 本身並不包含 Vue Router，而是以獨立 Package 形式存在，由 Vite 建立專案時可選擇是否使用 Vue Router。
使用 Named Slot 對 Component 傳入多筆 HTML
在 Component Tag 間只能傳送一筆 HTML，若要傳遞多筆 HTML，則要透過 <template> 使用 Named Slot。
使用 Slot 對 Component 傳入 HTML
對於 JavaScript 的資料，我們可透過 Prop 傳進 Component；但若要將 HTML 傳進 Component，則要使用 Slot。
使用 Event 從 Component 內傳出 Data
為了讓 Component 的 Reusability 更高，我們不會將呼叫 API 部分寫在 Component 內，而會將呼叫 API 部分寫在 Component 外部，如此我們必須從 Component 內傳出 Data。
使用 defineEmits() 定義 Event
從 Vue 3 開始，Vue 經過多次語法演進，到目前 Vue 3.2 所提供的 Script Setup 後，Vue 的寫法總算穩定下來，改用 defineEmits() 定義 Event，也是目前 Vue 官網範例的正式寫法，但還是有不少網路上範例或書籍用的是 Vue 3 早期寫法，雖然不再建議這樣寫，但還是得看得懂，並藉此了解 Vue 語法的演變軌跡。
使用 toRefs() 對 Prop 解構
由於 Prop 是以 Object 形式呈現，會直覺想用 Object Destructure 將其解構，但這會使得 Prop 喪失 Reactivity，必須透過 toRefs() 再 Destructure。
Prop 也能 Reactive
若希望外部對 Component 不只提供初始值而已，還能繼續與外部 State 連動，則要使用 defineProps() + computed() 組合完成。
使用 Prop 對 Component 提供初始值
有時我們只希望外部對 Component 提供初始值，並不需要與外部 State 連動，此時可使用 defineProps() + ref() 組合完成。
使用 defineProps() 定義 Prop
從 Vue 3 開始，Vue 經過多次語法演進，到目前 Vue 3.2 所提供的 Script Setup 後，Vue 的寫法總算穩定下來，改用 defineProps() 定義 Prop，也是目前 Vue 官網範例的正式寫法，但還是有不少網路上範例或書籍用的是 Vue 3 早期寫法，雖然不再建議這樣寫，但還是得看得懂，並藉此了解 Vue 語法的演變軌跡。
使用 v-model 將原生 HTML Element 包成 Component
針對一些 HTML Element 的共用 CSS Style，Vue 並不鼓勵使用 Global CSS，而是建議這些 HTML Element 包成 Component，然後各 page 都使用此 Component，此時可在 Component 使用 v-model，讓使用體驗與原生 HTML Element 無異。
使用 defineModel() 定義 v-model
defineModel() 為 Vue 3.4 的新 API，針對 Two-way Binding 的 v-model 有更簡單的寫法。
整合 Vue 3 與 Pico CSS
Pico CSS 為著名的 Classless CSS，有別於 Tailwind CSS 的 Utility First CSS，他為 Semantic HTML 提供了 Default Style，讓我們在開發時專心於 HTML 與 Vue。
實現 Reactive Select
多個 Select 連動也是實務上常見需求，傳統 jQuery 必須搭配複雜的 Event 與重組 HTML 才能達成，使用 Vue 的 Reactivity API 將可輕鬆達成需求。
computed()、watch()、 watchEffect()
Vue 提供了三個 Reactivity API：computed()、watch() 與 watchEffect()，三者很類似，但又不完全相同。
使用 watchEffect() 讓代碼更精簡
watch() 可追蹤特定 State 處理 Side Effect， 若需求是一開始要先執行 Side Effect，或同時追蹤多個 State，則可改用 Vue 3 新的 watchEffect()。
使用 watch() 追蹤 State 呼叫 API
除了使用 computed() 為特定 State 加工外，Vue 還提供 watch() 可追蹤特定 State 處理 Side Effect，尤其 呼叫 API 就是典型的 Side Effect。
使用 watch() 追蹤 State 處理 Side Effect
除了使用 computed() 為特定 State 加工外，Vue 還提供 watch() 可追蹤特定 State 處理 Side Effect。
使用 onMounted() 讀取 JSON 檔
mounted Hook 為 Vue 已經準備好 HTML 的 DOM Nodes，可以開始處理 HTML 時觸發，可在此 Hooks 初始化 State，如讀取 JSON 檔寫入 State，讀取 API 寫入 State … 等。
使用 v-model 綁定多選 Select
v-model 不僅僅只能綁定到 Textbox，也可以綁定到多列 Select，當在 HTML 改變 Select 狀態時，JavaScript 也會連動改變 State。
使用 v-model 綁定單選 Select
v-model 不僅僅只能綁定到 Textbox，也可以綁定到單一 Select，當在 HTML 改變 Select 狀態時，JavaScript 也會連動改變 State。