vue3中的Proxy一定要用Reflect的原因解析
用過vue的知道，vue的響應實現(xiàn)用的Proxy，且里面是配合Reflect用的,查看Proxy和Reflect文檔最顯眼的是Reflect對象的靜態(tài)方法和Proxy代理方法的命名相同，Reflect可以操作對象使用， proxy可以代理對象，但沒有找到為啥有時一定要在Proxy代理方法中使用Reflect
基本操作
Reflect對象的靜態(tài)方法和Proxy代理方法的命名相同，都有13種，示例get，set如下
const tempObj = { a: 1 };
Reflect.get(tempObj, 'a'); // 返回 1
Reflect.set(tempObj, 'a', 2); // 返回true 表示設置成功， a的值變2
const tempObj1 = { a: 1 };
const handler = {
get: function (obj, prop, receiver) {
return prop === 'a' ? 1000 : obj[prop];
},
set: function (obj, prop, value, receiver) {
console.log(prop);
obj[prop] = prop === 'a' ? 6 : value;
return true;
},
};
const proxyObj = new Proxy(tempObj1, handler);
proxyObj.a; // proxyObj => {a: 1000}
proxyObj.a = 2; // proxyObj => {a: 6}疑問
如果Proxy不做其它操作直接正常返回
const tempObj1 = { a: 1 };
const handler = {
get: function (obj, prop, receiver) {
return obj[prop];
},
set: function (obj, prop, value, receiver) {
obj[prop] = value
return true;
},
};
const proxyObj = new Proxy(tempObj1, handler);
proxyObj.a; // proxyObj => {a: 1}
proxyObj.a = 2; // proxyObj => {a: 2}以上面情況完Proxy可以不使用Reflect處理攔截，比使用Reflect簡單多了
不一樣的對象， 帶有get的對象
const tempObj1 = {
a: 1,
get value() {
console.log(this === proxyObj); // false
return this.a;
},
};
const handler = {
get: function (obj, prop, receiver) {
return obj[prop];
},
set: function (obj, prop, value, receiver) {
obj[prop] = value;
return true;
},
};
const proxyObj = new Proxy(tempObj1, handler);
proxyObj.value; // 1上面value中的打印的值為false，期望的結果應該true， 但應該代理中用的原對象取值所以this指向了原對象，所以值為false
雖然this指錯了，但得到值還是正確定，這不是一定的理由
const parent = {
a: 1,
get value() {
console.log(this === child); // false
return this.a;
},
};
const handler = {
get: function (obj, prop, receiver) {
return obj[prop];
},
set: function (obj, prop, value, receiver) {
obj[prop] = value;
return true;
},
};
const proxyObj = new Proxy(parent, handler);
const child = Object.setPrototypeOf({ a: 2 }, proxyObj);
child.value; // 1這就有問題了，輸出的結果都和期望的不一樣了，this應該指向child,但指向了parent
Reflect上場
要是Reflect.get(obj, prop)換成obj[prop]，這等于沒換，意義和結果是一樣的，這不是還有一個receiver參數(shù)沒有用嘛
const parent = {
a: 1,
get value() {
console.log(this === child); // true
return this.a;
},
};
const handler = {
get: function (obj, prop, receiver) {
Reflect.get(obj, prop)
- return obj[prop];
+ retrun Reflect.get(obj, prop, receiver)
},
set: function (obj, prop, value, receiver) {
- obj[prop] = value;
+ Reflect.get(obj, prop, value, receiver)
return true;
},
};
const proxyObj = new Proxy(parent, handler);
const child = Object.setPrototypeOf({ a: 2 }, proxyObj);
child.value; // 2
this指向正確，結果也當然和期望一致，receiver的不是指代理對象，也不是指原對象，而是執(zhí)行上下文（有句話是這么說的，不用特定方式改變this的情況下，誰調用指向誰，這就是期望的），這里child調用的value所以期望的指向應該是child, 這里你可能想到直接用receiver[prop]不行了，這樣會出現(xiàn)執(zhí)行溢出，receiver[prop]相當于child.value，child.value還沒執(zhí)行完，receiver[prop]又執(zhí)行了，就會無限在執(zhí)行
Reflect.get(target, key, receiver)中的receiver參數(shù)修改了this指向，不加this指向target, 加了后指向receiver
代理對象中有用到
this時一定要用到Reflect，這樣才能得到一直符合期望的值
總結
vue3中的代理對象到得的都是符合期望的值，在攔截中做了收集和更新，所以一定要在Proxy的攔截函數(shù)中使用Reflect處理
怎么一直拿到符合期望的值，代理了像沒有代理一樣
get: function (...arg) {
return Reflect.get(...arg);
},到此這篇關于為啥vue3中的Proxy一定要用Reflect的文章就介紹到這了,更多相關vue3中Proxy使用Reflect內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue自定義元素身上的右鍵事件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在實際項目開發(fā)中,我們會經(jīng)常與圖表打交道,比如?訂單數(shù)量表、商品銷量表、會員數(shù)量表等等,它可能是以折線圖、柱狀圖、餅狀圖等等的方式來展現(xiàn),下面這篇文章主要給大家介紹了關于vue項目中封裝echarts的優(yōu)雅方式的相關資料,需要的朋友可以參考下2022-03-03
本篇文章主要介紹了Vuex之理解Store的用法，Store類就是存儲數(shù)據(jù)和管理數(shù)據(jù)方法的倉庫，實現(xiàn)方式是將數(shù)據(jù)和方法已對象形式傳入其實例中2017-04-04
本篇文章主要介紹了詳解vue組件化開發(fā)-vuex狀態(tài)管理庫，具有一定的參考價值，有興趣的可以了解一下。2017-04-04
這篇文章主要介紹了vue3父子組件通信、兄弟組件實時通信方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
今天小編就為大家分享一篇vue 實現(xiàn)購物車總價計算，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了關于如何完全掌握Vue中$set方法的相關資料,vue中$set方法對數(shù)組和對象的處理本質上的一樣的,對新增的值添加響應然后手動觸發(fā)派發(fā)更新,需要的朋友可以參考下2023-11-11
vue項目登錄成功后退出時清空sessionId和userId的問題
這篇文章主要介紹了vue項目登錄成功后退出時清空sessionId和userId的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了js 實現(xiàn)拖拽排序，拖拽排序對于小伙伴們來說應該不陌生，平時工作的時候，可能會選擇使用類似Sortable.js這樣的開源庫來實現(xiàn)需求。但在完成需求后，大家有沒有沒想過拖拽排序是如何實現(xiàn)的呢？感興趣得話一起來看看下面文章得小心內容吧2021-11-11
這篇文章主要介紹了vue如何實現(xiàn)自定義底部菜單欄,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07