What is the difference between vue2 and vue3 two-way binding?

The difference between two-way binding in vue2 and vue3 is: vue2 uses the "Object.defineProperty" object and the hijacking of object properties to implement two-way binding; while the responsiveness in vue3 uses the "Proxy" in ES6 Method implements two-way binding.

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

Vue2 and Vue3 are the differences between the two -way binding

# Vue2 two -way data binding problems:

About objects: Vue cannot detect the addition or removal of proper.

About array: You cannot use the index to set up an array item directly, and you cannot modify the length of the array.

Vue2.0

Principle: Use the Object.defineProperty object and the hijacking of object properties to publish and subscribe mode. As long as the data changes, it will directly notify the change and drive the view update.

Grammar:

Object.defineProperty(obj, "name", { get:()=> {}, set:()=> {})

Parameter one: obj: hijack object, parameter two: "name": hijack object attribute, parameter three: add set and get methods to the attribute

Example:

 let obj = { name: "tom", age: 10 };
    Object.defineProperty(obj, "name", {
      get: () => {
        console.log("访问了name属性");
      },
      set: (newVule) => {
        console.log("设置了name属性");
      },
    });
    obj.name; //触发get
    obj.name = "jack";//触发set

Vue3.0

Principle: The responsiveness in Vue3.0 uses the Proxy method in ES6. Proxy objects are used to define custom behaviors for basic operations (such as attribute lookup, assignment, enumeration, function calling, etc.)

Syntax:

let p =new Proxy(obj,{get:(target,prop,p)=>{},set:(target, prop, vaule, p)=>{}})

Parameter 1: target: hijack object, parameter Number two: prop: hijack object attributes, parameter three: vaule: new attribute value, p: itself

Example:

   // vue3
    let p = new Proxy(obj, {
      get: (target, prop, p) => {
        console.log("获取");
        return prop in target ? target[prop] : "默认值";
      },
      set: (target, prop, vaule, p) => {
        console.log("设置");
        target[prop] = vaule;
      },
    });
    console.log(p.name); //访问了name属性
    console.log((p.name = "java")); //设置了name属性

Summary:

vue2 passes Object. defineProperty hijacks every property in the object

vue3 hijacks every property in the object through Proxy

[Related recommendations: "vue.js Tutorial 》】

The above is the detailed content of What is the difference between vue2 and vue3 two-way binding?. For more information, please follow other related articles on the PHP Chinese website!