タグ : Vue
Vuex 使用 Functional API
傳統 Vuex 都以 this 使用，這使得 Extract Function 時還必須將 Vue Instance 傳進 Function，事實上 Vuex 也能不使用 this，直接 Import Store 使用，甚至更近一步 Point-free。
Vue Router 使用 Functional API
傳統 Vue Router 都以 this 使用，這使得 Extract Function 時還必須將 Vue Instance 傳進 Function，事實上 Vue Router 也能不使用 this，直接 Import Router 使用，甚至更進一步 Point-free。
Vue 之 Once Event Modifier
實務上有些需求只希望 User 只能 Click Button 一次，之後任何 Click 都忽略不計，此時可使用 once Event Modifier 達成。
使 Prop 也能 Reactive
若 Prop 只用來對 Component 傳入初始值設定，只要在 mounted hook 接受並寫入 data 即可；但若日後還會將改變 Data 傳入 Prop，且希望 Component 能 Reactive 根據 Prop 改變，則要搭配 Computed 或 Watch。
使用 $refs 搭配 DOM API 產生 HTML
實務上 Vue 應該盡量使用 Model-based 寫法，專心處理 Data，HTML 則由 Vue 處理，但偶而會想直接使用 DOM API 處理 DOM，此時可使用 $refs。
使用 v-for 動態加入 Component
實務上有時候 UI 不見的一開始就有全部 Component，而是 User 按下 Button 才會動態加入，在 Vue 只要使用簡單的 v-for 就可完成。
Vue 之 v-for 搭配 Object
當使用 v-for 顯示重複資料時，直覺都會想到 Array，事實上 ECMAScript 的 Object 也是一種 Container，而 v-for 也支援 Object，在有些情境使用 Object 會比 Array 方便。
Vue 之 Prevent Event Modifier
有些 HTML Element 有其預設行為，如 <a> 與 <input type="submit">，使用 prevent Event Modifier 可避免執行預設行為。
Vue 之 Self Event Modifier
DOM Event 天生具有 Event Propagation 特性，且是由內向外觸發 Event，若想只有特定 Element 不接受 Event Propagation 所傳出 Event，可使用 self Event Modifier。
Vue 之 Capture Event Modifier
DOM Event 天生具有 Event Propagation 特性，且是由內向外觸發 Event，若想由外向內觸發，則稱為 Event Capturing，Vue 提供了 capture Event Modifier，讓我們在 HTML Template 就能以 Declarative 形式使 Event 往內層傳遞。
Vue 之 Stop Event Modifier
DOM Event 天生具有 Event Propagation 特性，Vue 提供了 stop Event Modifier，讓我們在 HTML Template 就能以 Declarative 形式阻止 Event 往外層傳遞。
使用 .sync 達成 Prop 之 Two-way Binding
Vue 允許我們對 HTML Tag 使用 v-model 達成 Two-way Binding，我們除了也可使用 v-model 對 Prop 達成 Two-way Binding 外，也可使用 .sync。
使用 v-model 達成 Prop 的 Two-way Binding
Vue 允許我們對 HTML Tag 使用 v-model 達成 Two-way Binding，我們也可使用 v-model 對 Prop 達成 Two-way Binding。
當 Vue-web-cam 當配 v-if 顯示
Vue-web-cam 若正常使用沒問題，但若將 Component 包在 v-if 內時則表現不如預期，必須配合一些 Workaround 解決。
使用 Vue-web-cam 控制 Camera
HTML 5 已經內建支援 Camera，Vue-web-cam 將 HTML 5 API 封裝成更適合 Vue 使用，還可以選擇內建 Camera 或者 USB Camera，更支援 Mobile Browser。
在本機以 HTTPS 測試 Vue
如詢問是否開啟 Camera 只有在 HTTPS 才會發生，因此在本機開啟 HTTPS 模式成為開發測試所必須，Vue CLI 並沒有內建 HTTPS，需另外加已設定。
如何對其他 Page 傳遞多值 ?
傳統對其他 Page 傳遞資料時，會以 Query String 形式，除了會暴露資料遭 Hacker 嘗試破解外，也不適合傳遞太多資料，若能將這些資料整合成 Object 傳遞，且不必出現在 URL，那就非常完美。
Component 基礎概念
Component 概念為 React 所發明，讓我們可以將 HTML、CSS 與 JavaScript 封裝成 Component，Vue、Angular 也使用 Component ，至此 3 大 Framework 都採用 Component-based 架構。
當 Component 遇見 Functional CSS
很多人對於 Functional CSS 直覺印象就是 HTML 會帶一堆 CSS Class，事實上當 Component 觀念出現後，由於 Prop 也能用在 CSS，因此 CSS 就有了新的用法。
Vue 之 Event
Vue Component 的 Prop，只能解決資料由外層 Component 傳給內層 Component，若要將資料從內層 Component 傳到外層 Component 呢 ? 此時就要使用 Event。
使用 TailwindCSS 處理 Global CSS
雖然在 Vue 儘量在 Component 內使用 Scoped CSS 避免 CSS 互相影響，但若各 Component 都套用，還是無法避免使用 Global CSS，原本 Vue 有多種方式使用 Global CSS，若使用 TailwindCSS 則有不同方式。
Vue 之 Prop
Component 若只有一層，那問題不大，若牽涉到 Component 包含 Component，就會牽涉到一個基本問題：該如何將 Model 由外層 Component 傳給內層 Component ? 此時就要使用 Prop。
SweetAlert2 之 Error Handling
一般來說呼叫 API 的 Asynchronous 才會遇到 Promise，也才需要 Error Handling，但 SweetAlert2 按下 Confirm 時回傳 Fulfilled Promise，按下 Cancel 時回傳 Rejected Promise，此時會進入處理 API 的 Error Handling，這該如何解決呢 ?
使 Production Build 不產生 Source Map
Chrome 可藉由 Source Map 在 Dev Tools 顯示 Vue 的 Source Code，但你可能希望 yarn build 之後的 Production Build 不要產生 Source Map，此需求可藉由 vue.config.js 設定達成。
使用 Vue-konva 以 HTML 5 Canvas 繪圖
Vue-konva 底層為 HTML 5 Canvas，可簡單使用 Canvas 繪圖，並具有 Vue 的 Declarative 與 Reactive 特性。
如何對 API 回傳資料加上 Cache ?
若 API 每次傳入的 Query String 相同，所回傳的結果也相同，對於這類 API 可以加上 Cache，當參數相同時，就不再發起 API Request，如此不但節省後端資源，使用者體驗更佳。事實上 ECMAScript 的 Closure + IIFE 就能實作出 Cache，並不需要依賴其他 Library。
使用 Vue-video-player 對 HLS 擷取 Image
Vue-video-player 與 Video.js 雖然能顯示 HLS，但卻沒提供 Capture Image 功能，我們必須使用 HTML 5 的 Canvas 才能達成需求。
使用 Vue-video-player 顯示 HLS
Safari 的 <video> tag 可直接支援 HLS，但 Chrome 與 Firefox 則不行，透過 Vue-video-player 則可在 Safari、Chrome 與 Firefox 都支援 HLS。
如何解決 Vue 開發環境違反 Same-Origin Policy ?
若前後端分離，且同時在本機開發 Vue 前端與 Node 後端時，很容易遇到違反 Same-Origin Policy 問題，本文介紹多種方式解決。
如何管理 JWT Token ?
管理 JWT Token 是前端不可避免的課題，若只透過 Vuex 或 Local Storage 都有其缺憾，唯有同時結合 Vuex 與 Local Storage 才是最完美方案。