Foreword:

Today, the editor will explain to you the two-way data binding principle of Vue2 and Vue3.

I am participating in the 2022 "Blog Star" annual general selection, please help me support and give me a five-star.
|
Click to go to my selection page:
|

You just need to give me five stars according to the picture, thank you for your help.

How does vue2.x implement a responsive system:

When you pass an ordinary js object into a vue instance as a data option, vue will traverse all prototypes (properties) of this object, and use object.defineProperty() to convert these prototypes (properties) into getters/setters, Collect data dependencies in the getter, monitor data changes in the setter, and notify subscribers once the data changes.

Each component instance corresponds to a watcher instance, which will record the “touched” data prototype (property) as a dependency during the component rendering process, and then when the setter of the dependency is triggered, it will notify the watcher to make it associated The component re-renders;

Pain points of defineProperty:

It cannot discover the new and deleted properties of the object. When you add a new property to an object, the new property is not added to the data update detection mechanism of vue;

Vue.set() can let Vue know that you have added a new property, in fact, Vue.set can let Vue know that you have added a new property. In fact, set() is also implemented internally by calling defineProperty();

When you use the index to directly set an array (new Array(4)) or modify the length of the array, Vue cannot detect the change of the array;
When the number of layers of object nesting is particularly deep (multi-layer nesting), the performance overhead caused by recursive traversal will be relatively large;

Use of Object.defineProperty code

mounted() {
    // 先定义好一套规则
    class Observer {
      constructor(data) {
        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);
              return data[key];
            },
            set(NewValue) {
              console.log("You set" + key);
              console.log("New Value" + NewValue);
              if (NewValue === data[key]) {
                return;
              }
              data[key] = NewValue;
            },
          });
        }
      }
    }
    let obj = {
      name: "app",
      age: 18,
      a: {
        b: 1,
        c: {
          d: 1,
        },
      },
    };
    let app = new Observer(obj);
    console.log(app);
    app.age = 20;
    app.newProperty = "new attrs";
    console.log(app);
  },

result:
insert image description here

Understanding of Proxy method

Proxy is up in vue3.0

It can solve the pain point of defineProperty, because the essential reason is that Proxy has a built-in interceptor object. All external access must first go through this layer of interception, whether it is a previously defined, newly added attribute, or a deeply nested attribute, it will be intercepted when accessing;

The Reflect.set() method is used to set the value of the object property, 1: target object: 2: change the name of the parameter: 3: change the value of the parameter: 4: the value is this If the setter is encountered, it will be provided to the target call.
This method returns a boolean value indicating whether the property was successfully set.

Proxy code usage:

mounted() {
    const obj = {
      name: "app",
      age: 19,
      a: {
        b: 1,
        c: 2,
      },
    };
    const p = new Proxy(obj, {
      get(target, propKey, receiver) {
        console.log("Your visited：" + propKey);
        // Reflect.set()方法用于设置对象属性的值:1：目标对象:2：改变参数的名称:3：改变参数的值
        // 此方法返回一个布尔值，该值指示该属性是否已成功设置。
        return Reflect.set(target, propKey, receiver);
      },
      set(target, propKey, value, receiver) {
        console.log("You set：" + propKey);
        console.log("New value：" + value);
        // Reflect.set()方法用于设置对象属性的值，1：目标对象:2：改变参数的名称:3：改变参数的值:4：值是this如果遇到设置器，将提供给目标调用。
        // 此方法返回一个布尔值，该值指示该属性是否已成功设置。
        return Reflect.set(target, propKey, value, receiver);
      },
    });
    p.age = "20";
    console.log(p);
    p.newProperty = "New attribute";
    console.log(p);
  },

result:
insert image description here

Summarize:

Proxy is used to manipulate objects and extend the reach of objects, while Object.defineProperty() is simply to manipulate the properties of objects;
Vue2.X uses Object.defineProperty() to implement data response, but limited by the implementation of defineProperty(), it must traverse recursively to the bottom of the object;
Vue3.0 uses Proxy to intercept objects, no matter what operation is performed on the target, it will first pass the processing logic of Proxy;
In addition to Vue3.0, there are other libraries that also use Proxy.

Finally, please help me to click, thank you for your help

I am participating in the 2022 "Blog Star" annual general selection, please help me support and give me a five-star.
|
Click to go to my selection page:
|

You just need to give me five stars according to the picture, thank you for your help.

The above is the two-way data binding principle of Vue2 and Vue3. If you don’t understand it, you can ask me in the comment area or chat with me in private. I will continue to release some new functions in the future, so stay tuned.
My other articles: https://blog.csdn.net/weixin_62897746?type=blog

Two-way data binding principle of Vue2 and Vue3

Table of contents