Proxy 這個用法是我在 學習 ES6 的時候，覺得一定要懂的東西， 從 jQuery 時期學到的語法，大多都是資料操作 DOM 物件，事件操作資料，再順便關聯資料，當我寫 ES6 純介面的時候，看到 Vue 的雙向綁定，由資料綁定物件，物件連動資料，覺得很方便，查了一些方式理解到，Vue 3的未來都是採用這種叫做 Proxy 的作法來達成，我還以為是 jQuery 的 $.proxy 查了 MDN 的文件才發現大有來頭。
寫 PHP 的時候 有一串 Magic Method 的用方，協助撰寫者利用 __get、 __set 在外部取得變數或是 method 的時候加工處理回傳或是給值，laravel 也是定義這種用法 defining-an-accessor 協助你在使用一個物件的時候，外部去給值與取值， JavaScript 的 Proxy 可說就是這種用法。
Vue 3 目前已經全面使用 Proxy 來做雙向綁定，會了 Proxy 也不一定只有用 Vue 的時候去無形使用，畢竟是 原生的用法，所以會了這個就可以用在很多地方。
舉個目前我會用到的兩個場景 Notify 跟 Dialog ，在專案中無論你用了哪種套件或是作法，呼叫 Notify 跟 Dialog 這兩個物件都會是最常使用到的地方，目前最好的方法都是統一使用方式呼叫並使用， Proxy 可以很好的代理你需要呼叫的套件。
首先我用了 Quasar 的 Notify 當作示範，這個例子也實際用在我的專案上
先確認一下 Notify 的 API ，可以參考 Predefined types 章節，提供了五個按鈕的
詳細作法我輸入到了codepen DEMO https://codepen.io/mesak/pen/yLpLgqr
從註解開始 ==== start 到 end 的內容，可以獨立到一隻 Notify js ，未來想要統一修改內容或是串接不同的套件用法，都可以用這支檔案來實作。
上排是原生的呼叫用法，操作雖然多樣化，但是整個網站的都需要統一通知內容，所以位置、顏色、方向、盡量都統一一個呼叫模式會更好，所以第二排的按鈕區域，採用了 helper function 的作法，可以直接呼叫內容，如果額外想要增加參數，小小的自定義一下內容，可以利用第二個或是第三個參數擴充
Proxy 整個幫你把系統內呼叫 Notify 的方法給統一了，不需要輸入過多的參數，內容都幫你帶入了。
如果想要做成 Dialog 我建議也可以用類似模式來達成，不過 Dialog 的組成方式因為包含了 Components ，要帶入的參數跟用法就會多一點，可能需要參照一點 HOC 的用法。
Proxy 可以幫你攔截，可以幫你設定，理論上也可以利用它來做雙向綁定或是各種兜圈子繞路的事情，你不一定需要會用它，但是你需要看懂它。
