vue3.0中为何使用proxy

Object.defineProperty是ES5中的方法，它可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
用法如下：

   var obj = {
       name:'zhangsan' } //此后可通过obj.name访问obj的name属性 //通过obj.name='lisi'来设置obj的name属性

当然也可以通过设置访问器get和set来控制obj对象，用法如下：

Object.defineProperty(obj,"name",{ set:function(val){ console.log("赋值时候调用我,我的新值是"+ val) }, get:function(){ console.log("取值的时候调用我") return 123 } })

之后通过obj.name访问obj的name属性时会触发get方法，通过obj.name='lisi'的方式设置obj的name属性值时，会触发set方法。貌似没大用，但您不觉得在对象属性值得操作上可以做更多事情了吗？比如你不想让人知道obj的name属性是"张三"。可以修改get方法的逻辑，如下：

get:function(){ return this.name.replace(/san/,'先生'); }

这样用户在通过obj.name访问obj的name属性时得到的就是"zhang先生"，那么set的时候是不是也可以这样弄呢？

接上文~：其实都不能，这样会触发循环调用，因为 this.name也是对属性的访问啊，也会触发get方法。
那如何实现返回"zhang先生"呢？
拷贝一个对象objCopy，属性和obj要一模一样
如下：

var objCopy = {
       name:'zhangsan' }

在obj的set，get方法里操作它就行了。如下：

Object.defineProperty(obj,"name",{ set:function(val){ if(var==='lisi'){ console.log("誓死不叫这么土的名字") }else{ objCopy.name = val } }, get:function(){ return objCopy.name.replace(/san/,'先生') } }) 

这样就用两个对象和get,set方法成功的实现了好像是数据劫持或者是代理的这么个操作模式，有没有种娶了媳妇连小姨子也到手的赶脚？
把dom数据更新的逻辑写到set或get方法里就实现了当下流行js框架的数据流。
那proxy是个什么东东呢？

此物一出，你再不用费力的去自己克隆一个对象。用法如下：

  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对象的代理对象。