The reason why Proxy in vue3 must be parsed using Reflect

If you have used vue, you know that the response implementation of vue uses Proxy, and it is used in conjunction with Reflect. The most conspicuous thing about viewing Proxy and Reflect documents is that the static method of the Reflect object is the same as the Proxy proxy method. Reflect can operate the object, and proxy can proxy the object, but I haven't found why sometimes you must use Reflect in the Proxy proxy method.

Basic Operation

The static methods of the Reflect object are named the same as the Proxy proxy methods, and there are 13 types. Example get and set are as follows

const tempObj = { a: 1 };
(tempObj, 'a'); // Return 1(tempObj, 'a', 2); // Return true to indicate that the setting is successful, the value of a becomes 2
const tempObj1 = { a: 1 };
const handler = {
  get: function (obj, prop, receiver) {
    return prop === 'a' ? 1000 : obj[prop];
  },
  set: function (obj, prop, value, receiver) {
    (prop);
    obj[prop] = prop === 'a' ? 6 : value;
    return true;
  },
};
const proxyObj = new Proxy(tempObj1, handler);
; // proxyObj => {a: 1000}
 = 2; // proxyObj => {a: 6}

doubt

If Proxy does not do other operations, it will return normally

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: 1}
 = 2; // proxyObj => {a: 2}

After the above situation, Proxy can handle interception without using Reflect, which is much simpler than using Reflect.

Different objects, objects with get

const tempObj1 = {
  a: 1,
  get value() {
    (this === proxyObj); // false
    return ;
  },
};
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);
; // 1

The printed value in the above value is false, and the expected result should be true, but the original object used in the proxy should take the value, so this points to the original object, so the value is false

Although this is wrong, the value is still correct, which is not a certain reason.

const parent = {
  a: 1,
  get value() {
    (this === child); // false
    return ;
  },
};
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 = ({ a: 2 }, proxyObj);
; // 1

This is a problem. The output results are different from the expected ones. This should point to child, but point to parent

Reflect comes on

if(obj, prop)Change toobj[prop], this is equivalent to not changing, the meaning and result are the same. Isn't there another receiver parameter that is useless

const parent = {
  a: 1,
  get value() {
    (this === child); // true
    return ;
  },
};
const handler = {
  get: function (obj, prop, receiver) {
    (obj, prop)
   - return obj[prop];
   + retrun (obj, prop, receiver)
  },
  set: function (obj, prop, value, receiver) {
   - obj[prop] = value;
   + (obj, prop, value, receiver)
    return true;
  },
};

const proxyObj = new Proxy(parent, handler);
const child = ({ a: 2 }, proxyObj);
; // 2

thisThe point is correct, and the results are of course consistent with expectations.receiver does not refer to the proxy object, nor does it refer to the original object, but the execution context (there is a saying that if this is not changed in a specific way, who calls point to whom, this is what is expected).childCalledvalueSo the expectation should bechild, You may think of using it directly herereceiver[prop]No, this will cause execution overflow.receiver[prop]Equivalent to，Not finished yet,receiver[prop]If executed again, it will be executed infinitely

(target, key, receiver)In-housereceiverParameters have been modifiedthisPoint, not addthisPoint totarget, add it and point itreceiver

Useful in proxy objectsthisMust use it whenReflect, in order to get the value that always meets the expectations

Summarize

The proxy objects in vue3 get the expected values, and they have been collected and updated during interception, so they must beProxyUsed in the intercept functionReflectdeal with

How to get the expected value all the time, the proxy is like no proxy

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

This is the article about why Proxy in vue3 must use Reflect. For more related content about Proxy in vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!