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