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