vue3的proxy

proxy的定義：

　　es6提供原生proxy構造函數，可以理解成對對象的攔截，當對象被訪問時，進行攔截操作。

具體使用：

　　

const p = new Proxy(target, handler);

• target： 所要攔截的目標對象（可以是任何類型的對象，包括原生數組，函數，甚至另一個代理）
• handler：一個對象，定義要攔截的行為

const p = new Proxy({}, {
    get(target, propKey) {
        return '哈哈，你被我攔截了';
    }
});

console.log(p.name);
// 哈哈，你被我攔截了

注意Proxy是用來操作對象的。代理的目的是為了拓展對象的能力。

再看一個例子 我們可以實現一個功能：不允許外部修改對象的name屬性。

const p = new Proxy({}, {
    set(target, propKey, value) {
        if (propKey === 'name') {
            throw new TypeError('name屬性不允許修改');
        }
        // 不是 name 屬性，直接保存
        target[propKey] = value;
    }
});
p.name = 'proxy';
// TypeError: name屬性不允許修改
p.a = 111;
console.log(p.a); // 111

 

 

關於object.definepropery  和  proxy的差別？

　　object.definepropery:

• 檢測不到對象屬性的添加和刪除：當你在對象上新加了一個屬性newProperty，當前新加的這個屬性並沒有加入vue檢測數據更新的機制(因為是在初始化之后添加的)。vue.$set是能讓vue知道你添加了屬性, 它會給你做處理，$set內部也是通過調用Object.defineProperty()去處理的
• 無法監控到數組下標的變化，導致直接通過數組的下標給數組設置值，不能實時響應。
• 當data中數據比較多且層級很深的時候，會有性能問題，因為要遍歷data中所有的數據並給其設置成響應式的。

為什么proxy可以解決這些問題？

　　為什么使用 Proxy 可以解決上面的問題呢？主要是因為Proxy是攔截對象，對 對象進行一個"攔截"，外界對該對象的訪問，都必須先通過這層攔截。無論訪問對象的什么屬性，之前定義的還是新增的，它都會走到攔截中。

 

總結

• Proxy是用來操作對象的，Object.defineProperty() 是用來操作對象的屬性的。
• vue2.x使用 Object.defineProperty()實現數據的響應式，但是由於 Object.defineProperty()是對對象屬性的操作，所以需要對對象進行深度遍歷去對屬性進行操作。
• vue3.0 用 Proxy 是對對象進行攔截操作，無論是對對象做什么樣的操作都會走到 Proxy 的處理邏輯中
• vue3.0、dobjs/dob、immer等庫目前都使用到了 Proxy，對對象進行讀寫攔截，做一些額外的處理。

參考：
鏈接：https://juejin.cn/post/6844904088119853063