vue3源码分析之Relect

先看vue 3.x的源码一部分：

这个createGetter其实就是把proxy里面get的内容封装起来。简单的说就是我们读取对象属性的时候会通过proxy的get返回对象属性，并在这个时候通过track()方法收集依赖，我们知道触发proxy的get属性，要返对象的属性，为什么这里要用Reflect方法而不用return target[key]来返回对象属性。
先看下面的代码：

 let obj={
    
    
           a:1,
           get b(){
    
    
               return this.a
           }
        }
        let proxyObj=new Proxy(obj,{
    
    
            get(target,key,receiver){
    
    
                return target[key]
            }
        })
        let childObj=Object.create(proxyObj)
        childObj.a=2
        console.log(childObj.b)//1

我们希望改变childObj对象的a属性时，也能改变childObj对象的b属性跟着a改变而改变。但是结果是不符合预期，我们給a赋值了2，结果输出b是1。因为childObj没有b属性，我们没有实现它，而childObj的__proto__指向了proxyObj，所以当我们打印输出childObj的b属性时，触发proxyObj的get方法来获取b属性的值，而get方法获取的是obj里的getter，obj里的getter中this的值指向的是obj，而不是当前的childObj。下面使用Reflect来获取属性，

 let obj={
    
    
           a:1,
           get b(){
    
    
               return this.a
           }
        }
        let proxyObj=new Proxy(obj,{
    
    
            get(target,key,receiver){
    
    
                return Reflect.get(target,key,receiver)
            }
        })
        let childObj=Object.create(proxyObj)
        childObj.a=2
        console.log(childObj.b)//2

结果childObj.b为2，当我们打印输出childObj.b时，依旧是从原型链上面获取b，经过proxy代理，由于现在使用了Reflect.get()来获取属性，target对象中指定了getter，receiver则为getter调用时的this值，现在getter被childObj调用，this指向了childObj，所以输出的是2。