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