Vue3 HOC( higher order components )，原本我還不知道 HOC 的意思，主要是用了 Quasar 元件庫之後，針對原有的組件有些事件、方法想要異動，當然想操作到最少異動達到我的效果，所以搜尋了類似的關鍵字，最後才知道利用 HOC ( higher order components ) 可以達到我要的目的，HOC 在 React 已經是相當成熟的概念了，但是在 Vue 裡面實際上看到的案例相當少。
首先可以理解一下 Vuc 的 HOC 的來由，可以參考這篇：探索Vue高阶组件
我能夠快速理解的模式就是，撰寫一個 function 幫你與目標元件溝通，並且取代成原本的 component
下列這個專案：@hoc-element/table 就是一個針對 element plus 修改的例子
開始寫專案之前，團隊都是使用 Vue 2 寫畫面，Vue 2 要升級到 Vue 3 對我來說，最大的轉變就是 extends 了
Vue 2 用的是 Options API， Vue 3 寫的是 Composition API，寫法什麼的對還沒開始完成專案的我來說，好像沒太大差異。
但是當我實際開始寫之後，才知道我在專案上之前應用了很多 extends 用法，在 Vue 3 裡面通通失效了…
原本寫成 extends 的作法是讓每個 Component 都可以不必撰寫就有此方法，data 也可以逐一傳遞，現在通通要改成 Vue 3 的寫法。
Vue 的本身是沒有權限的，雖然 vue router 本身建議基於 路由把資料塞到 meta 內，不過這個邏輯不方便應用我的後台管理。
目前設計的是公司內部使用的管理介面，所以是有點類似論壇的概念，每個使用者一定會有特定的權限，後端也會設計角色群組，授權給不同的使用者，所以一定會有交錯的權限設計。
目前後端採用的權限控管使用 casbin 權限控管，帶入 laravel 有的 route name，每個路由都會有獨立的 key name ，前端的路由也可以對應後端的路由，不過要確定一個明確的 keyname，根據 laravel 的 resource 定義，能夠讀取首頁的 route name 都定義為 index 。
router, route 不知從何開始，寫後端都有一個 router 來控管程式進入的方式，透過 framework 框架的路徑模式，控管每個 function 的進入點來回傳內容，細部的切分讓程式的分工執掌更明確，統一的進入點讓程式的載入更有一致性。
以往麵條式的載入寫法都被視為非主流寫法，因為統一的調用更能夠掌握整個程式的運作模式，也衍伸了像是整個程式的生命週期問題，同步與非同步調用等設計模式。
開始寫 vue之後，沒想到前端也有個路由，加上之前看過的 class 繼承，越來越覺得 前端是不是跟後端也有點像了… 不過這也不是個壞東西，既然接了就要來弄懂他。
開始寫 vue 的時候，首先最好開始理解一下 es6 的寫法，由於我是寫 php 居多，所以當我看到 es6 有 class 還有 extends 的時候，感覺相當熟悉，好像見到了老朋友…，不過幾個同事看到我專案寫一堆 extends 都叫我去寫 React XD….
利用 vue 建立了許多 component 之後，就會發現會遇到很多傳值的問題。
在許多框架裡面，會以 全域狀態管理的模式來管理這些你需要延續傳遞下去的數值，換作原生的 JavaScript 來說，當你遇到變數作用域無法共享的時候，vuex 那就放 WINDOW 的變數一樣，大家都抓的到。
許久沒更新 Blog 的文章了，因為換了工作，時間都被工作排滿了，要重新學習的東西太多了，所以荒廢了部落格的文章
熊熊忘了自己的部落格文章也有部分是偏技術的 XD。
標題直接點破這次學習的就是 Vue ，不過我學的 Vue 有點雜食，主要我主力還是放在後端，也許後面有機會，會持續更新一點 後端 Laravel 的文件。
原先的工作是利用 jQuery 來支援原有的系統，再一段一段把後端的程式碼，由麵條式代碼改成 Framework 的形狀，打算逐步進行更新，原專案用了 jQuery 純 AJAX 建立了類似 前後端分離的模式。
更新期間進行了一次改版，把前端由純 JS + jQuery 改成 ES6 的 import 檔案加上 template7 來動態載入內容，感覺有一點像是 SPA 的東西，不過離 SPA 的模樣還是差個十萬八千里。