Vue3 HOC( higher order components )，原本我還不知道 HOC 的意思，主要是用了 Quasar 元件庫之後，針對原有的組件有些事件、方法想要異動，當然想操作到最少異動達到我的效果，所以搜尋了類似的關鍵字，最後才知道利用 HOC ( higher order components ) 可以達到我要的目的，HOC 在 React 已經是相當成熟的概念了，但是在 Vue 裡面實際上看到的案例相當少。
首先可以理解一下 Vuc 的 HOC 的來由，可以參考這篇：探索Vue高阶组件
我能夠快速理解的模式就是，撰寫一個 function 幫你與目標元件溝通，並且取代成原本的 component
下列這個專案：@hoc-element/table 就是一個針對 element plus 修改的例子
首先依照這篇文件：HOC in vue 3 (higher order components) 的範例可以理解，我們可以利用一個外部的 function 去設計或是引用一個 元件 components，給他不同參數做不一樣的計算，達到一樣的顯示目的。
利用 Vue 3 來撰寫 HOC 的話，要利用 Template Refs 讓中間件取代元件，並且繼承原有的事件，再額外擴充事件應用
對應的目標我放在同樣這個沙盒中
這邊目標是使用 Quasar 的 QForm 來擴充一個 function ，原始 QForm 的 code 在這邊，可以看到其實內容有大部份是相同的
重點就是 HOC QForm.js 的 這段
Object.assign(vm.proxy, {
serialize,
serializeWithData,
validate: (shouldFocus) => rootRef.value.validate(shouldFocus), // validate,
resetValidation: () => rootRef.value.resetValidation(),
focus: () => rootRef.value.focus(),
submit: (evt) => rootRef.value.submit(evt),
reset: (evt) => rootRef.value.reset(evt),
getValidationComponents: () => rootRef.value.getValidationComponents()
})這段替代了 原有的 QForm 裡面有的 function ，並且用相同的 submit 與 reset 相應呼叫，為的是我需要擴充 DOM 原生物件的 HTMLFormElement ，他沒有 serialize 的選項，之前 jQuery 用習慣 serializeArray 跟 serialize 一直都是我把 Form 重組資料送API 的好用的工具，再加上 reset 與 submit 的控制方式，可以讓原有的 click 事件真正的去觸發 submit 讓我覺得不用不行
接著又擴充一個 function
function serializeWithData(data, keys = null) {
let setKeys = keys === null ? Object.keys(result.value) : keys
return _.pickBy(data, function (value, key) {
return setKeys.indexOf(key) != -1
})
}這組程式碼配合 lodash ，重新的將 input 綁定 v-model 的 data filter 過濾掉，再次組成 Object ，往後端送
唯一的缺點就是 要跟原生的 HTML 一樣，要把 input 物件與 v-model 的 data key 一樣，還要將 input 帶上 name才可以完整作動，總之算是一個擴充的應用，這個應用可以在讓你在操作其他 框架組件的時候，不用修改底層，套用你擴充的 HOC 組件可以好維護又可以快速套用內容，未來對應組件改版也可以改一個內容全部通用。
