Proxy和Reflect

Proxy

Proxy可以监听到对象内部操作的变化，比如对象或数组的增查改删。
相对于Object.defineProperty，最大的优势是它可以监听到数组的长度变化。
有了Proxy，使得vue3的源码简洁了不少。

const arr = [];
//用Proxy包装数组或对象，使之内部操作可以被监听到
const proxyArr = new Proxy(arr,{
    get(target,propName){
        console.log('get',target,propName);
        return target[propName];
    },
    set(target,propName,value){
        console.log('set',target,propName,value);
        target[propName] = value;
        return true;
    },
    deleteProperty(target,propName){
        console.log('delete',target,propName);
        return delete target[propName]
    }
});
setTimeout(()=>{
    proxyArr.push('hello');
},1000);
setTimeout(()=>{
    proxyArr.splice(0,1);
},2000);

Reflect

Reflect就是反射的意思，还是一些对象内部的方法，比如get、set、deleteProperty、defineProperty等，可以放在Reflect这个全局对象上访问到。

const arr = [];
//用Proxy包装数组或对象，使之内部操作可以被监听到
const proxyArr = new Proxy(arr,{
    get(target,propName){
        console.log('get',target,propName);
        return Reflect.get(target,propName);
    },
    set(target,propName,value){
        console.log('set',target,propName,value);
        Reflect.set(target,propName,value);
        return true;
    },
    deleteProperty(target,propName){
        console.log('delete',target,propName);
        return Reflect.deleteProperty(target,propName);
    }
});
setTimeout(()=>{
    proxyArr.push('hello');
},1000);
setTimeout(()=>{
    proxyArr.splice(0,1);
},2000);