proxy 代理配置?Vue2實現響應式是利用了Object.defineProperty()，而到Vue3的時候實現響應式确改成了Proxy，今天小編就來聊一聊關于proxy 代理配置?接下來我們就一起去研究一下吧!

proxy 代理配置

Vue2實現響應式是利用了Object.defineProperty()，而到Vue3的時候實現響應式确改成了Proxy

主要在于Object.defineProperty()存在一些無法修複的缺陷

1、無法檢測到對象的新增和删除

<div>{{userInfo}}</div> data (){ return { userInfo:{ name:'xxx' } } }, created () { this.userInfo.age = 222 } // userInfo顯示結果 // userInfo:{ "name": 'xxx' }

2、無法監聽數組變化

<div>{{arr}}</div> data (){ return { arr:[1,2] } } }, created () { this.arr[0]=3 } // arr顯示結果 // arr:[1,2]

要解決的話，需要通過vue2的$set方法，比如

this.$set(this.userInfo,'age',222) this.$set(this.arr,0,3)

但是proxy就能很好地解決這些問題

Proxy是對象的一個代理，可以實現基本操作的攔截和自定義

// target是要代理的對象 // handle是一個容納一批特定屬性的占位符對象 const p = new Proxy(target, handler)

看起來是不是有點懵，下面我們通過這個例子來入個門

const target={ a:1 } const handler={ // get攔截 // 在這裡可以做一些日志處理 // target代理的對象 // key為對象的屬性 // 例如：p.a，那麼target就是p，key就是a get(target,key){ console.log(key '被獲取了') if(key in target){ return target[key] }else{ return '我不知道' } }, // set攔截 // 在這裡可以做一些日志處理 // target代理的對象 // key為對象的屬性 // value是設置的值 // 例如：p.a=3，那麼target就是p，key就是a，value就是3 set(target,key,value){ if(key in target){ console.log(`屬性${key}被設置了新的值${value}`) }else{ console.log(`添加了新的屬性${key},值為${value}`) } target[key]=value return true }, // delete攔截 // 在這裡可以做一些日志處理 // target代理的對象 // key為對象的屬性 // 例如：delete p.a，那麼target就是p，key就是a deleteProperty(target,key){ if(key in target){ console.log(`屬性${key}被删除了`) } delete target[key] } }

我們做一下簡單的測試

const p = new Proxy(target, handler) p.a // 輸出1 p.b // 輸出我不知道 p.a=3 // 輸出屬性a被設置了新的值3 p.b=6 // 輸出添加了新的屬性b,值為6 delete p.a // 輸出屬性a被删除了 delete p.b // 沒有任何輸出

好了Proxy的入門就講到這了

覺得效果不錯的請幫忙加個關注點個贊，經常分享前端實用開發技巧