Warum muss Reflect für Proxy in vue3 verwendet werden?

Wer Vue verwendet hat, weiß, dass die Antwortimplementierung von Vue Proxy verwendet und mit Reflect verwendet wird. Das Auffälligste beim Betrachten der Proxy- und Reflect-Dokumente ist, dass die statische Methode des Reflect-Objekts denselben Namen hat wie der Proxy-Proxy Methode. Reflect kann zum Bearbeiten von Objekten verwendet werden, Proxy kann Objekte vertreten, aber ich habe nicht herausgefunden, warum man Reflect manchmal in der Proxy-Proxy-Methode verwenden muss Als Proxy-Proxy-Methoden gibt es 13 Beispiele für get und 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}

Frage

Wenn Proxy keine anderen Vorgänge ausführt und direkt zurückgibt

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}

In der obigen Situation kann Proxy das Abfangen ohne verarbeiten Verwenden von Reflect, was viel einfacher ist als die Verwendung von Reflect Sei der Wert, also zeigt dies auf das ursprüngliche Objekt, also ist der Wert falsch. Dies zeigt zwar auf das falsche Objekt, aber der Wert ist immer noch korrekt. Dies ist kein sicherer Grund. Es liegt ein Problem vor. Die Ausgabeergebnisse weichen von den Erwartungen ab. Dies sollte auf das untergeordnete Element verweisen, zeigt jedoch auf das übergeordnete Element obj[prop] Dies bedeutet keine Änderung. Die Bedeutung und das Ergebnis sind nicht gleich > zeigt richtig, und das Ergebnis stimmt natürlich mit den Erwartungen überein. receiver bezieht sich weder auf das Proxy-Objekt noch auf das Originalobjekt, sondern auf den Ausführungskontext (mit Der Satz ist so, ohne sich zu ändern Dies ist eine bestimmte Art und Weise, wer auch immer aufruft, zeigt auf wen, das wird erwartet), hier ruft child value auf, also sollte der erwartete Punkt child< sein /code>. Hier denken Sie vielleicht darüber nach, <code>receiver[prop] direkt zu verwenden, aber das wird nicht funktionieren. Dies führt zu einem Ausführungsüberlauf, der < entspricht code>child.value, child.value wurde noch nicht ausgeführt und receiver[prop] wird erneut ausgeführt und wird auf unbestimmte Zeit weiter ausgeführt

Der Parameter receiver in Reflect.get(target, key, Receiver) ändert den Zeiger this, ohne this</ hinzuzufügen. code> Zeigen Sie auf <code>target und dann auf receiver

Wenn this im Proxy-Objekt verwendet wird, achten Sie darauf, < zu verwenden code>Reflect, auf diese Weise können wir jederzeit die erwarteten Werte erhalten

Zusammenfassung

Die Proxy-Objekte in vue3 erhalten die erwarteten Werte. Sie werden beim Abfangen gesammelt und aktualisiert muss in Proxy< sein. Verwenden Sie <code>Reflect in der Abfangfunktion von /code>, um zu verarbeiten

So erhalten Sie immer den erwarteten Wert, der Proxy ist so, als ob es keinen Proxy gäbe

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

Das obige ist der detaillierte Inhalt vonWarum muss Reflect für Proxy in vue3 verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!