«

vue3响应式Proxy与Reflect如何使用

时间:2024-7-6 09:30     作者:韩俊     分类: Javascript


    理解Proxy与Reflect

    vue3的响应式离不开Proxy,说到Proxy则离不开Reflect.这两个对象是ES6新增的对象,同时在编程领域,他们也代表着2种设计模式,即代理与反射。

    Proxy

    Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须经过这层拦截,而我们就可以通过这层拦截去改变目标对象的内容或者行为,或者叫过滤和控制。这个词本意就是代理,好比一个代理人站在神奇,我们所有行为都会被他过滤,可能我们说的话,经过代理人一说,意思就变了。

    ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。

    其中target表示要代理的那个对象,handler则是表示我们需要拦截的行为,这里直接放一张阮一峰的截图。

    Reflect

    Reflect中文译为:反射。如果说Proxy 是有一个代理人站在身前面,帮你拦截并处理一些行为,那么Reflect就是你身后的一面镜子,它能看见真实的自己。

    而你自己,就是一个类或者对象,或者一个函数,只要是js中存在的,都能被Proxy 和 Reflect处理。

    它的操作和Proxy正好相反,但却一一对应。比如我们获取对象中一个属性。

    const obj = {foo:1}
    const a = Reflect.get(obj, 'foo')

    这一小节主要是介绍了Proxy与Reflect,后面会有一个应用老告诉你为什么Proxy与Reflect与响应式数据息息相关。

    实践示例

    看完了Proxy与Reflect的基本使用之后,我们实践一下。

    我们曾经写过这样的代码

    const reactive = (object)=>{
        return new Proxy(object,{
           get(target,key){
             track(target,key)
             return target[key]
           }
           set(target,key, newVal){
               target[key] = newVal
               trigger(target,key)
               return true
           }
        })
    }

    其实就是用Proxy代理了对象读和取操作,在读的时候收集依赖,在取的时候触发响应。看起来似乎没有问题,那么我们再试继续往下写

    const obj = {
        a:1,
        get b(){
          return this.a
        }
    }
    const data = reactive(obj)
    effect(()=>{
        console.log(data.b)
    })
    setTimeOut(()=>{
        data.b++
    },500)

    这里我们没有用一般的对象写法,而是通过访问器为它新增了一个b属性.之后,我们先把这个对象转换为响应式对象,再给他们设定一个响应式的回调,然后在冬天改变他的值,理论上这时候应该会执行副作用函数,但是实际上呢,根本不会执行。

    我们回顾一下之前写的reactive方法,在里面返回的是target[key],当我们的target是obj,key是b的时候,那个this会是谁呢?因为target是原始对象,也就是obj,根据谁调用是谁的原则,这个this也就指向了obj。obj是响应式对象吗,显然不是,那个b也就永远不会执行副作用函数,响应式就失效了。

    这里其实就是this的指向问题,你可能会说一般人怎么会用getter去赋值属性呢,但是这个作为一个简单的case,甚至都算不上边界,我们需要解决它。

    解决的方法也很简单,就是通过Reflect。这也是为什么我说Proxy与Reflect就是焦不离孟 孟不离焦. 我们的reactive,get的时候,加入第三个参数receiver

    get(target,key){
        track(target,key,receiver)
        return Reflect.get(target,key,receiver)
    }

    我这里理解的是,receiver就相当于函数的bind方法,它改变的this的执行,当我们同过Reflect读取值的时候,this的指向被改为receiver,而Reflect时的receiver又是Proxy中的入参,它执行了这个Proxy,从而把前文中this的指向由obj改为data,这样响应式就不会丢失了。

    标签: javascript vue

    热门推荐