Analysis of the reasons why Vue3 uses Proxy to implement data monitoring

Vue data two-way binding principle, but this method has shortcomings, and cannot implement partial monitoring of arrays and objects; for details, you can also see a blog I wrote before: Solution to Vue's inability to watch array and object changes. The latest Proxy, compared with Vue2's Object.defineProperty, can achieve the effect of doubling the speed and halving the memory. Let’s talk about how it is implemented and why it can double the speed and halve the memory compared to the old implementation method:

Vue initialization process

The initialization process of Vue includes Observer, Compiler and Watcher. When we create a new Vue, Observer will be called to listen to all the properties of the data, computed or props (if it is a component) of the Vue object through Object.defineProperty. At the same time, the template instructions are parsed by the Compiler. After the attributes are parsed, a new Watcher is created and the update function is bound to the watcher. The Observer and Compiler are associated through the attributes.

Object.defineProperty

Let's take a simple Object.defineProperty example

class Observer {
    constructor(data) {
      // Traverse the properties of the parameter data and add them to this for (let key of Object.keys(data)) {
        if (typeof data[key] === "object") {
          data[key] = new Observer(data[key]);
        }
        Object.defineProperty(this, key, {
          enumerable: true,
          configurable: true,
          get() {
            console.log("You visited" + key); //You visited age
            return data[key];//20
          },
          set(newVal) {
            console.log("You set" + key); //You set age
            console.log("new" + key + "=" + newVal); //new age=20
            if (newVal === data[key]) {
              return;
            }
            data[key] = newVal;
          }
        });
      }
    }
  }const obj = {
    name: "app",
    age: "18",
    a: {
      b: 1,
      c: 2,
    }
  };const app = new Observer(obj);app.age = 20;console.log(app.age);app.newPropKey = "new property";console.log(app.newPropKey); //new property

From the above, we can know that Object.defineProperty needs to traverse all properties, which means that if the data size in the data/computed/props of the vue object is large, the traversal will be much slower. Similarly, if the data size in the data/computed/props of the vue object is large, then Object.defineProperty needs to monitor the changes of all properties, which will occupy a lot of memory.

Proxy

Let’s look at proxy

Proxy objects are used to define custom behaviors for basic operations (such as property lookup, assignment, enumeration, function call, etc.)

It can be understood as setting an "interception" before the object. When the monitored object is accessed, it must pass through this layer of interception. The original object can be processed in this interception and the required data format can be returned. That is, no matter what attribute of the object is accessed, whether it is a previously defined or newly added attribute, it will be processed in the interception. This solves the problem of not being able to monitor before.

const obj = {
  name: "krry",
  age: 24,
  others:
    mobile: "mi10",
    watch: "mi4",
  },};const p = new Proxy(obj, {
  get(target, key, receiver) {
    console.log("The properties to be viewed are: " + key);  
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log("The set property is: " + key); 
    console.log("New property: " + key, "Value: " + value); 
    Reflect.set(target, key, value, receiver);
  },});p.age = 22;console.log(p.age); p.single = "NO";console.log(p.single);p.others.shoe = "boost";console.log(p.others.shoe);The output result is:The set property is: age
New attribute: age Value: 22 The attribute to be viewed is: age22

The property to be set is: single
New attribute: single Value: NO Attribute to be viewed: singleNO Attribute to be viewed: others
The properties to be viewed are: others
boost

As can be seen above, adding or editing properties does not require re-adding responsive processing, and all can be monitored, because Proxy is an operation on objects. As long as you access the object, you will enter the logic of Proxy. Reflect is a built-in object that provides methods for intercepting JavaScript operations. These methods are the same as those for proxy handlers. Reflect is not a function object, so it is not constructible. The difference between Proxy and Object.defineProperty seems to be very similar in usage, but Proxy actually intercepts properties at a higher dimension.

In Object.definePropertyVue2, for a given data: such as { count: 1 }, it is necessary to intercept get and set based on the specific key, that is, count, that is:

Object.defineProperty(data, 'count', {
  get() {},
  set() {},})

You must know in advance what the key to be intercepted is. This is why Vue2 is powerless against new attributes on objects. Therefore, during the initialization of Vue, it is necessary to traverse the data to hold the data changes, resulting in slower speed and larger memory usage.

Proxy The Proxy used by Vue3 intercepts like this:

new Proxy(data, {
  get(key) { },
  set(key, value) { },})

As you can see, the proxy does not need to care about the specific key. It intercepts the modification of any key on the data and the reading of any key on the data.

Therefore, both existing keys and newly added keys will be monitored.

This concludes this article on the analysis of why Vue3 uses Proxy to implement data monitoring. For more information about why Vue3 uses Proxy to implement data monitoring, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!