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 的內容，會有一些 computed 的用法，完全取代了 list 會有的功能，在應用裡面寫了 get & set ，曾經同事就問我，單單使用 array 不好嗎？我只能說沒有不好，只是我在學習新寫法的時候，學到了使用 Map 的物件，這個 Map 不是 array 下的那個方法 map ，而是一個全新的類型，最主要用於儲存 key-value 物件，詳細可以上 MDN 去參考範例

還有 Set 跟 Object 的差異，這個可以先參考下面這個文章，就可以多少了解 Map 的好處

開始寫專案之前，團隊都是使用 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 繼承，越來越覺得 前端是不是跟後端也有點像了… 不過這也不是個壞東西，既然接了就要來弄懂他。