vue3源码分析之Relect

最新推荐文章于 2024-08-10 17:13:01 发布

前端小懒虫

最新推荐文章于 2024-08-10 17:13:01 发布

阅读量466

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44494811/article/details/113745942

版权

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

先看vue 3.x的源码一部分：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210207200123723.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NDgxMQ==,size_16,color_FFFFFF,t_70
这个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。