首頁 > web前端 > Vue.js > 主體

vue3中的Proxy為什麼一定要用Reflect

PHPz
發布: 2023-06-01 18:55:06
轉載
1403 人瀏覽過

用過vue的知道,vue的響應實現用的Proxy,且裡面是配合Reflect用的,查看Proxy和Reflect文檔最顯眼的是Reflect物件的靜態方法和Proxy代理方法的命名相同,Reflect可以操作物件使用, proxy可以代理對象,但沒有找到為啥有時一定要在Proxy代理方法中使用Reflect

基本操作

Reflect對象的靜態方法和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參數沒有用嘛

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的不是指代理對象,也不是指原對象,而是執行上下文(有句話是這麼說的,不用特定方式改變this的情況下,誰調用指向誰,這就是期望的),這裡child調用的 value所以期望的指向應該是child, 這裡你可能想到直接用receiver[prop]不行了,這樣會出現執行溢出,receiver[prop] 相當於child.valuechild.value還沒執行完,receiver[prop]又執行了,就會無限在執行

Reflect.get(target, key, receiver)中的receiver參數修改了this指向,不加this指向target, 加了後指向receiver

#代理物件中有用到this時一定要用到Reflect,這樣才能得到一直符合期望的值

#總結

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

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

  get: function (...arg) {
    return Reflect.get(...arg);
  },
登入後複製

以上是vue3中的Proxy為什麼一定要用Reflect的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:yisu.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!