Proxy在vue3.0响应式中的应用

      关于Proxy的概念和原理，在阮老师的书中有详细的讲解：https://es6.ruanyifeng.com/#docs/proxy。下面做一个简单的回顾。

      作为构造函数，Proxy接收两个参数。

var proxy = new Proxy(target, handler);

      第一个参数是想要代理的目标对象target，若没有Proxy的介入，操作原来要访问的就是这个对象；第二个参数是配置对象，对每个被代理的操作提供一个对应的处理函数，该函数将拦截对应的操作，若handler没有设置任何拦截操作就等同于直接通向原对象。 

      而vue3的响应式就是利用Proxy对象对数据进行拦截实现的。handler中支持的拦截操作有13种，我们以其中三种为例，模拟vue3中实现响应式的方法。

function reactive(obj){
    if(typeof obj === 'object'){
        const observed = new Proxy(obj,{
            get(target, propKey, receiver){
                // 查
                const res = Reflect.get(target, propKey, receiver);
                console.log(`查询${propKey}:${res}`)
                // 递归，解决嵌套对象的响应问题
                return typeof res === 'object' ? reactive(res) : res;
            },
            set(target, propKey, value, receiver){
                // 增 & 改
                const res = Reflect.set(target, propKey, value, receiver);
                console.log(`修改${propKey}:${res}`)
                // 返回的res是布尔值
                return res;
            },
            deleteProperty(target, propKey){
                // 删
                const res = Reflect.deleteProperty(target, propKey);
                console.log(`删除${propKey}`)
                return res;
            }
        })
        return observed;
    }else{
        return obj
    }
}

      get方法用于拦截某个属性的读取操作，接收3个参数，依次为目标对象、属性名和操作行为作用对象（可选）。

      set方法用于拦截某个属性的赋值操作，接收4个参数，依次为目标对象、属性名、属性值和操作行为作用对象（可选）。

      deleteProperty方法方法用于拦截某个属性的delete操作，接收两个参数，依次为目标对象，属性名。

      以下列数据为例，演示一下拦截方法的执行过程。

const data = {
    name:'nie',
    info:{
        age:18,
        gender:'female'
    }
}
const reactData = reactive(data)

      例一、读取数据

console.log('输出查询结果：',reactData.name)
console.log('输出嵌套对象：',reactData.info.age)

      执行结果

      由上图可知，在查询属性时，会被get方法拦截，当对象存在嵌套时，会通过递归继续查询下去。

      例二、给数据重新赋值

// 设置属性
reactData.name = 'keith';
// 设置嵌套属性
reactData.info.age = 20;
// 设置不存在的属性
reactData.hobby = 'coding';

      执行结果

      例三、删除存在的属性

// 删除属性
delete reactData.name
// 删除嵌套属性
delete reactData.info.gender

      执行结果

      由执行结果可知，当修改或删除嵌套属性时，会首先对上级的属性进行查询操作。

      了解了Proxy的执行过程，就可以理解vue3关于响应式的实现方式了：把数据通过Proxy套壳拦截，首先对当前对象的key值对应的自定义函数进行绑定（可使用WeakMap进行缓存），当set或delete时，根据当前操作的对象的key，从缓存中获取响应函数并执行，数据更新。

      完整代码可参考：https://gitee.com/lixiaonie/codes/pvxkz5r9dhg8sb0qc6u4o66