美文网首页
vue的proxy和defineProperty区别

vue的proxy和defineProperty区别

作者: Leson17 | 来源:发表于2020-07-27 02:18 被阅读0次

    vue的proxy和defineProperty区别

    Object.defineProperty(obj,"name",{
      set:function(val){
          if(var==='lisi'){
                console.log("誓死不叫这么土的名字")
          }else{
                  objCopy.name = val
          }
      },
      get:function(){
        return objCopy.name.replace(/san/,'先生')
       }
    })这个对每个data中的属性进行遍历绑定。而,
    
    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替换了原先遍历对象使用Object.defineProperty方法给属性添加set,get访问器的笨拙做法。

    也就是说不应遍历了,而是直接监控data对象了。

    相关文章

      网友评论

          本文标题:vue的proxy和defineProperty区别

          本文链接:https://www.haomeiwen.com/subject/sozolktx.html