Proxy

Proxy英文就是代理的意思，我们可以通过Proxy对目标对象进行包装，然后通过这个代理对象来操作实际对象，就可以监听到实际对象内部操作的变化。
相对于Object.defineProperty，最大的优势是它可以监听到数组的长度变化。

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]
    }
});
proxyArr.push('hello');
console.log(arr);//['hello']
console.log(proxyArr[0]);//hello
setTimeout(()=>{
    proxyArr.splice(0,1);
},1000);

Reflect

Reflect就是反射的意思，还是一些对象内部的方法，比如get、set、deleteProperty、defineProperty等，可以放在Reflect这个全局对象上访问到。
用Reflect有个好处，就是会返回执行结果，这比直接操作对象要严谨，比如赋值操作target['prop'] = 'xxx'不一定会成功，而直接return true就会造成麻烦。

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