關於Vue 3.0 的改進 Proxy 代理實現數據驅動視圖

Vue 3.0 中使用了 Proxy 對象代理進行攔截實現了數據綁定視圖的驅動操做。彌補了vue2.0中的侷限，好比屬性刪除增長監聽、對數組基於下標的修改、長度變化等等。

參考一下網上流傳的機制圖

Proxy 是什麼？

---

首先咱們來了解一下Proxy是什麼。Proxy不是簡單的serverProxy服務器代理，而生ES6中新特性Proxy，咱們先看一下MDN官網的說明

Proxy 對象用於建立一個對象的代理，從而實現基本操做的攔截和自定義（如屬性查找、賦值、枚舉、函數調用等）。

#### 術語
handler
包含捕捉器（trap）的佔位符對象，可譯爲處理器對象。
traps
提供屬性訪問的方法。這相似於操做系統中捕獲器的概念。
target
被 Proxy 代理虛擬化的對象。它常被做爲代理的存儲後端。根據目標驗證關於對象不可擴展性或不可配置屬性的不變量（保持不變的語義）。

#### 語法

const p = new Proxy(target, handler)

• 參數

target
要使用 Proxy 包裝的目標對象（能夠是任何類型的對象，包括原生數組，函數，甚至另外一個代理）。
handler
一個一般以函數做爲屬性的對象，各屬性中的函數分別定義了在執行各類操做時代理 p 的行爲。

參考網址 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy#%E8%AF%AD%E6%B3%95

---

經過官網的說明咱們知道，Proxy是能夠對對象的各類操做攔截，下面咱們經過代理來演示一下。

const target = { list: [] }
const handle = {
    /**
    /* 監聽設置方法
    /* @params target 對象目標
    /* @params prop 對象鍵
    /* @params value 設置的值
    **/
    set(target, prop, value) {
        // 若是設置的是list，增長元素
        if (prop === 'list') {
            target[prop].push(value)
            console.log('可自定義觸發diff策略驅動視圖')
            return true
        }
        // 增長屬性值
        target[prop] = value
    }
}
const observedData = new Proxy(target, handle)
observedData.list = '123'
observedData.list = '456'
observedData.list = '789'
console.log(observedData.list) // ['123', '456', '789']

由以上代碼能夠看到咱們自定義攔截了對象的設置操做，那麼我在自定義一個視圖驅動引擎和map緩衝操做等便可對數據進行雙向綁定性能優化等操做。