Object.defineProterty、Proxy区别和用法

现在犹大的Vue中的数据双向绑定用到的就是Object.defineProterty()方法实现的。但是即将发布的vue3.x用的是proxy

Object.defineProterty()用法：

语法：

　　Object.defineProperty(参数1，参数2，参数3) 　　

　　参数1：目标对象 　　

　　参数2：要修改或者添加的属性名称 　　

　　参数3：目标对象属性的一些特征 (是一个对象) 　　　　　　 　　　　　　

　　　　参数1：value:属性值 　　　　　　

　　　　参数2：writable：对象属性值是否可以被修改 true允许 false不允许 　　　　　　

　　　　参数3：configurable:对象属性是否可以被删除 true允许 false不允许 　　　　　　　　　　　　　　

　　　　参数4：enumerable:对象属性是否可被枚举 　　　　　　

　　　　参数5：get():给一个属性提供getter方法，当访问这个对象的属性值得时候触发该方法

　　　　参数6：set():给一个属性提供setter方法，当设置属性值得时候触发该方法

let obj ={
    name:'gqq',
    age:23
  }
  Object.defineProperty(obj,'name',{
    // value:'hahah',
    // writable:false,
    // configurable:false,
    // enumerable:false,

    get(){
      console.log('get',arguments)
    },

　　set(){
      console.log('set',this)
    },

}) // 注意：当使用了get()方法或者set()方法的时候就不能使用value和writable中的任何一个属性否则会报错

Proxy (参数1，参数2)

　　参数1：目标对象

　　参数2：目标对象属性的一些特征 (是一个对象)

　　　　参数1：get():给一个属性提供getter方法，当访问这个对象的属性值得时候触发该方法

　　　　参数2：set():给一个属性提供setter方法，当设置属性值得时候触发该方法

let obj ={
    name:'gqq',
    age:23,
  }
  const newObj = new Proxy(obj,{
    get(target,name){
      return target[name]
    },
    set(target,name,newVal){
      console.log(arguments)
      target[name] = newVal;
    }
  })

 

　　　　

• Proxy 的优势如下:
• Proxy 可以直接监听对象而非属性；
• Proxy 可以直接监听数组的变化；

• Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
• Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
• Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
• Object.defineProperty 的优势如下:

• 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.x )才能用 Proxy 重写。