码迷,mamicode.com
首页 > 其他好文 > 详细

vue3.0中为何使用proxy

时间:2020-04-28 18:53:53      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:code   动作   return   this   赋值   用法   objcopy   对象属性   ken   

 

Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
用法如下:

   var obj = {
       name:‘zhangsan‘
   }
  //此后可通过obj.name访问obj的name属性
  //通过obj.name=‘lisi‘来设置obj的name属性

当然也可以通过设置访问器get和set来控制obj对象,用法如下:

Object.defineProperty(obj,"name",{
  set:function(val){
    console.log("赋值时候调用我,我的新值是"+ val)
    },
  get:function(){
    console.log("取值的时候调用我")
    return 123
   }
})
之后通过obj.name访问obj的name属性时会触发get方法,通过obj.name=‘lisi‘的方式设置obj的name属性值时,会触发set方法。貌似没大用,但您不觉得在对象属性值得操作上可以做更多事情了吗?比如你不想让人知道obj的name属性是"张三"。可以修改get方法的逻辑,如下:

get:function(){
    return this.name.replace(/san/,‘先生‘);
}
这样用户在通过obj.name访问obj的name属性时得到的就是"zhang先生",那么set的时候是不是也可以这样弄呢?
接上文~:其实都不能,这样会触发循环调用,因为this.name也是对属性的访问啊,也会触发get方法。
那如何实现返回"zhang先生"呢?
拷贝一个对象objCopy,属性和obj要一模一样
如下:


var objCopy = {
       name:‘zhangsan‘
   }

在obj的set,get方法里操作它就行了。如下:

Object.defineProperty(obj,"name",{
  set:function(val){
      if(var===‘lisi‘){
            console.log("誓死不叫这么土的名字")
      }else{
              objCopy.name = val
      }
  },
  get:function(){
    return objCopy.name.replace(/san/,‘先生‘)
   }
})

这样就用两个对象和get,set方法成功的实现了好像是数据劫持或者是代理的这么个操作模式,有没有种娶了媳妇连小姨子也到手的赶脚
把dom数据更新的逻辑写到set或get方法里就实现了当下流行js框架的数据流。
那proxy是个什么东东呢?


此物一出,你再不用费力的去自己克隆一个对象。用法如下:

  var objCopy = new Proxy(obj,{
          get:function(target,key){
                if(key==‘name‘){
                      return target[key].replace(/san/,‘先生‘);
                }
          },
          set:function(target,key,value){
                if(key == ‘name‘){
                    value==‘lisi‘?target[key]:target[key] = value;
                }else{
                    target[key] = value;
                }
          }
   })

get,set方法的target参数即obj对象,key参数是要操作的属性,value参数是赋值动作时的值。
此后,可通过objCopy.name的方式访问obj的name属性,也可以通过objCopy.name=‘lisi‘的方式设置obj的name属性,而且不用给每个属性都设置set,get方法,不会触发循环调用,很是爽的。
这样我们通过对objCopy对象的操作就实现了对obj对象的操作,objCopy对象就是obj对象的代理对象



 

vue3.0中为何使用proxy

标签:code   动作   return   this   赋值   用法   objcopy   对象属性   ken   

原文地址:https://www.cnblogs.com/zhouyideboke/p/12796283.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!