zoukankan      html  css  js  c++  java
  • 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对象了。
  • 相关阅读:
    数组指针和指针数组的区别
    C++虚函数
    C++容器
    红黑树
    COM RTS/CTS, DTR/DSR
    linux和windows多线程的异同
    socket
    C++vector使用
    select函数详解
    linux下头文件
  • 原文地址:https://www.cnblogs.com/sweeeper/p/11104535.html
Copyright © 2011-2022 走看看