vue的proxy和defineProperty区别

最新推荐文章于 2025-07-15 20:39:01 发布

weixin_30586085

最新推荐文章于 2025-07-15 20:39:01 发布

阅读量709

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sweeeper/p/11104535.html

本文深入探讨了Vue3中采用的Proxy技术，替代了传统的Object.defineProperty方法，实现更高效的数据响应机制。通过实例展示了如何利用Proxy进行数据劫持，提供了一种更为简洁、灵活的数据监控方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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对象了。

转载于:https://www.cnblogs.com/sweeeper/p/11104535.html