VUE 3.0 Proxy

2,220 阅读2分钟

何为Proxy ?

1 . Proxy 这个词的原理为代理,在这里可以表示由它来“代理”某些操作,译为“代理器”。
2 . Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所有的访问都必须先通过这层拦截,因此提供了一种机制,可以对外部的访问进行过滤和修改。
3 . proxy接受一个待代理目标对象和一些包含元操作的对象,为待代理目标创建一个‘屏障’,并拦截所有操作,重定向到自定义的元操作对象上。

实际应用

const p = new Proxy(target,handler)

target

要包装的目标对象Proxy。它可以是任何类型的对象,包括本机数组,函数甚至其他代理

handler

一个对象,其属性是定义对代理p执行操作时的行为的函数

举例:

    let person = {
        name: 'A'
    }
    let personProxy = new Proxy(person, {
        get(target, key) {
            console.log('获取get属性')
            return target[key];
        },
        set(target, key, value) {
            console.log('设置set属性')
            return Reflect.set(target, key, value);
        }
    });

如图例所示: personProxy 是person的代理,当personProxy的取值赋值时,会进入到hander的get/set方法中。

image.png

VUE3.0升级Proxy的应用

在VUE2.X版本中,响应式布局一个最重要的API就是Object.defineProperty,用这个API用来做数据劫持。

但是 defineProperty 的缺陷有以下几个:

1.无法原生监听数组的变化,需要特殊处理
2.必须遍历对象的每个属性(当示例初始化的时,Object.definePropety是从data的根节点遍历到末节点。一次性便利全部)
3.无法监听属性的新增删除操作(VUE提供Vue.set Vue.delete API,原因就是因为Object.definePropety物件监听新增删除操作)

VUE3.0对数据的收集劫持用到了Proxy,代替了definePropety,上面提到了definePropety三个缺点。