vue的proxy和defineProperty区别

Posted sweeeper

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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区别的主要内容,如果未能解决你的问题,请参考以下文章

学习 vue2.0/3.0 中的proxy和Object.defineProperty 小记

Vue双向绑定原理 从vue2的Object.defineProperty到vue3的proxy

vue 下个版本中(3.0)为什么弃用Obeject.defineProperty 采用 proxy(es6)

胜负已分:Proxy VS Object.defineProperty

胜负已分:Proxy VS Object.defineProperty

《深入浅出Vue.js》读书笔记2-Proxy的自我尝试