在 Vue2 中，我們透過 defineProperty 來建立資料的 getter 和 setter，然而我們遇到了幾個問題

• 檢測不到物件屬性的添加和刪除
• 陣列 API 方法有些無法監聽
• 會對每個屬性遍歷監聽，若是鑲套對象則還會需要進行深層監聽，十分消耗效能

在 Vue3，當可以拋棄了 IE 後許多新的語法都可以加入了，譬如說今天的主角 proxy

Proxy

proxy 為一個構建函數

let proxtItem = new Proxy(target, handler)

target 表示需要攔截的對象，handler 代表攔截對象的一些屬性設置，基本的 get, set 以及其他的設定等等，譬如我們如果要建立一個響應物件可以這樣設定

function observe(o){
    return new Proxy(o, {
        set(target, property, value){
            target[property] = value
        }
    })
}

除非在物件上設定 configuration: false 或是 weitable: false 的屬性，不然都可以透過 proxy 來代理你的物件，並且 proxy 同時還有一個好用的配合 Reflect

Reflect

reflect 所定義的靜態方法包含了 Proxy handler 能處理的所有代理操作，但他提供的是呼叫原始物件的操作，並且 reflect 讓我們一些對於物件的操作可以更改成使用函式來操作，提供更加好看的撰寫風格

'apple' in fruit
// 同等於
Reflect.has(fruit, 'apple')

delete fruit.apple
// 同等於
Reflect.deleteProperty(frult, 'apple')

並且， Reflect 可以控制被 Proxy 代理函式的 this 參考對象，若對這個有興趣的可以移至 ArvinH 的部落格 進行觀看，大神的理解我還在嘗試吃透當中

Proxy 的使用場景

Proxy 常用在這些用途

• 攔截和監視外部對物件的訪問
• 降低函式或類的複雜度
• 在複雜操作前對操作進行檢查或對要調用的資源進行管理

下面為一個透過 proxy 與 reflect 混用的響應模型

function observe(target, key, value, receiver) {
  const result = Reflect.set(target, key, value, receiver);
  queuedObservers.forEach(observer => observer());
  return result;
}

今天稍微提一下 proxy 與 reflect 的內容，若後續有吃更透再開一篇來講解吧，今天到此結束~