欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3中的Proxy一定要用Reflect的原因解析

 更新時間:2023年04月23日 10:31:27   作者:L_J_K  
Reflect可以操作對象使用, proxy可以代理對象,但沒有找到為啥有時一定要在Proxy代理方法中使用Reflect,這篇文章主要介紹了vue3中的Proxy一定要用Reflect的原因解析,需要的朋友可以參考下

用過vue的知道,vue的響應(yīng)實現(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 表示設(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}

疑問

如果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簡單多了

不一樣的對象, 帶有g(shù)et的對象

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)該代理中用的原對象取值所以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

這就有問題了,輸出的結(jié)果都和期望的不一樣了,this應(yīng)該指向child,但指向了parent

Reflect上場

要是Reflect.get(obj, prop)換成obj[prop],這等于沒換,意義和結(jié)果是一樣的,這不是還有一個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指向正確,結(jié)果也當然和期望一致,receiver的不是指代理對象,也不是指原對象,而是執(zhí)行上下文(有句話是這么說的,不用特定方式改變this的情況下,誰調(diào)用指向誰,這就是期望的),這里child調(diào)用的value所以期望的指向應(yīng)該是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,這樣才能得到一直符合期望的值

總結(jié)

vue3中的代理對象到得的都是符合期望的值,在攔截中做了收集和更新,所以一定要在Proxy的攔截函數(shù)中使用Reflect處理

怎么一直拿到符合期望的值,代理了像沒有代理一樣

  get: function (...arg) {
    return Reflect.get(...arg);
  },

到此這篇關(guān)于為啥vue3中的Proxy一定要用Reflect的文章就介紹到這了,更多相關(guān)vue3中Proxy使用Reflect內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue自定義元素身上的右鍵事件問題

    Vue自定義元素身上的右鍵事件問題

    這篇文章主要介紹了Vue自定義元素身上的右鍵事件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue項目中封裝echarts的優(yōu)雅方式分享

    vue項目中封裝echarts的優(yōu)雅方式分享

    在實際項目開發(fā)中,我們會經(jīng)常與圖表打交道,比如?訂單數(shù)量表、商品銷量表、會員數(shù)量表等等,它可能是以折線圖、柱狀圖、餅狀圖等等的方式來展現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue項目中封裝echarts的優(yōu)雅方式的相關(guān)資料,需要的朋友可以參考下
    2022-03-03
  • Vuex之理解Store的用法

    Vuex之理解Store的用法

    本篇文章主要介紹了Vuex之理解Store的用法,Store類就是存儲數(shù)據(jù)和管理數(shù)據(jù)方法的倉庫,實現(xiàn)方式是將數(shù)據(jù)和方法已對象形式傳入其實例中
    2017-04-04
  • 詳解vue組件化開發(fā)-vuex狀態(tài)管理庫

    詳解vue組件化開發(fā)-vuex狀態(tài)管理庫

    本篇文章主要介紹了詳解vue組件化開發(fā)-vuex狀態(tài)管理庫,具有一定的參考價值,有興趣的可以了解一下。
    2017-04-04
  • vue3父子組件通信、兄弟組件實時通信方式

    vue3父子組件通信、兄弟組件實時通信方式

    這篇文章主要介紹了vue3父子組件通信、兄弟組件實時通信方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vue 實現(xiàn)購物車總價計算

    vue 實現(xiàn)購物車總價計算

    今天小編就為大家分享一篇vue 實現(xiàn)購物車總價計算,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 一文完全掌握Vue中的$set方法

    一文完全掌握Vue中的$set方法

    這篇文章主要給大家介紹了關(guān)于如何完全掌握Vue中$set方法的相關(guān)資料,vue中$set方法對數(shù)組和對象的處理本質(zhì)上的一樣的,對新增的值添加響應(yīng)然后手動觸發(fā)派發(fā)更新,需要的朋友可以參考下
    2023-11-11
  • vue項目登錄成功后退出時清空sessionId和userId的問題

    vue項目登錄成功后退出時清空sessionId和userId的問題

    這篇文章主要介紹了vue項目登錄成功后退出時清空sessionId和userId的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • js 實現(xiàn)拖拽排序詳情

    js 實現(xiàn)拖拽排序詳情

    這篇文章主要介紹了js 實現(xiàn)拖拽排序,拖拽排序?qū)τ谛』锇閭儊碚f應(yīng)該不陌生,平時工作的時候,可能會選擇使用類似Sortable.js這樣的開源庫來實現(xiàn)需求。但在完成需求后,大家有沒有沒想過拖拽排序是如何實現(xiàn)的呢?感興趣得話一起來看看下面文章得小心內(nèi)容吧
    2021-11-11
  • vue如何實現(xiàn)自定義底部菜單欄

    vue如何實現(xiàn)自定義底部菜單欄

    這篇文章主要介紹了vue如何實現(xiàn)自定義底部菜單欄,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-07-07

最新評論