vue3响应式Proxy与Reflect的理解及基本使用实例详解

 更新时间:2022年08月02日 10:12:07   作者:冒菜师  
这篇文章主要为大家介绍了vue3响应式Proxy与Reflect的理解及基本使用实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

在第四章中,作者讲述了Vue.js中响应式系统的设计与实现,这一块其实是整个框架的基石,也是MVVM中,ViewModel(VM)的重要组成部分。 其实在上一章中我已经感觉很难了,有一些操作作者也只是几笔带过,却很值得我们思考。这一张中,我们将目光着重于响应式数据本身,来完善上一章中我们的demo。

理解Proxy与Reflect

vue3的响应式离不开Proxy,说到Proxy则离不开Reflect.这两个对象是ES6新增的对象,同时在编程领域,他们也代表着2种设计模式,即代理与反射。设计模式都是后话,等我学会了也一定写一篇文章分享一下🤪.

Proxy

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

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

var proxy = new Proxy(target, handler);

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

Reflect

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

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

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

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

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

实践示例

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

我们曾经写过这样的代码

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。这也是为什么我说ProxyReflect就是焦不离孟 孟不离焦. 我们的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,这样响应式就不会丢失了。

下一章中,作者会深入的介绍一下Proxy和一些相关的标准。

以上就是vue3响应式Proxy与Reflect的理解及基本使用实例详解的详细内容,更多关于vue3响应式Proxy Reflect的资料请关注脚本之家其它相关文章!

相关文章

  • Vuex的安装、搭建及案例详解

    Vuex的安装、搭建及案例详解

    vuex是一个专门为vue开发的状态管理工具,它采用集中式存储管理应用的所有组件的状态,其核心是state,下面这篇文章主要给大家介绍了关于Vuex的安装、搭建及案例的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue路由跳转到新页面实现置顶

    vue路由跳转到新页面实现置顶

    这篇文章主要介绍了vue路由跳转到新页面实现置顶问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue实现图片拖拽功能

    vue实现图片拖拽功能

    这篇文章主要为大家详细介绍了vue实现图片拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Vue条件循环判断+计算属性+绑定样式v-bind的实例

    Vue条件循环判断+计算属性+绑定样式v-bind的实例

    今天小编就为大家分享一篇Vue条件循环判断+计算属性+绑定样式v-bind的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue 动画效果、过渡效果的示例代码

    Vue 动画效果、过渡效果的示例代码

    这篇文章主要介绍了Vue 动画效果、过渡效果,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • vue使用lodop打印控件实现浏览器兼容打印的方法

    vue使用lodop打印控件实现浏览器兼容打印的方法

    这篇文章主要介绍了vue使用lodop打印控件实现浏览器兼容打印的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • vue本地模拟服务器请求mock数据的方法详解

    vue本地模拟服务器请求mock数据的方法详解

    这篇文章主要给大家介绍了关于vue本地模拟服务器请求mock数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • Vue学习笔记之表单输入控件绑定

    Vue学习笔记之表单输入控件绑定

    本篇文章主要介绍了Vue学习笔记之表单输入绑定,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 浅析Vue中method与computed的区别

    浅析Vue中method与computed的区别

    在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。这篇文章主要介绍了Vue中method与computed的区别,需要的朋友可以参考下
    2018-03-03
  • vue中keep-alive组件的用法示例

    vue中keep-alive组件的用法示例

    众所周知keep-alive是Vue提供的一个抽象组件,主要是用来对组件进行缓存,从而做到节省性能,这篇文章主要给大家介绍了关于vue中keep-alive组件用法的相关资料,需要的朋友可以参考下
    2021-05-05

最新评论