Was ist der Unterschied zwischen der bidirektionalen Bindung von vue2 und vue3?

Der Unterschied zwischen der bidirektionalen Bindung in vue2 und vue3 besteht darin, dass vue2 das Objekt „Object.defineProperty“ und die Entführung von Objekteigenschaften verwendet, um eine bidirektionale Bindung zu erreichen; während die Reaktionsfähigkeit in vue3 die „Proxy“-Methode in ES6 verwendet Sicherlich eine bidirektionale Bindung zu erreichen.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.

Was ist der Unterschied zwischen der bidirektionalen Datenbindung von vue2 und vue3?

Probleme mit der bidirektionalen Datenbindung von Vue2:

                                                                                                                                                             .利 Über Arrays: Sie können den Index nicht verwenden, um ein Array-Element direkt einzurichten, und Sie können auch nicht die Länge des Arrays ändern.

Vue2.0

Prinzip: Bei Verwendung des Object.defineProperty-Objekts und des Hijacking- + Publish-Subscribe-Modus von Objekteigenschaften wird die Änderung direkt benachrichtigt und die Ansichtsaktualisierung vorangetrieben, solange sich die Daten ändern.

Grammatik:

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

Parameter eins: obj: Objekt entführen, Parameter zwei: „Name“: Objektattribut entführen, Parameter drei: Set- und Get-Methoden zu Attributen hinzufügen

Beispiel:

 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

Prinzip: Die Reaktionsfähigkeit in Vue3.0 verwendet die Proxy-Methode in ES6. Proxy-Objekte werden verwendet, um benutzerdefiniertes Verhalten für grundlegende Vorgänge zu definieren (z. B. Attributsuche, Zuweisung, Aufzählung, Funktionsaufruf usw.).

Syntax:

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

Parameter eins: Ziel: Objekt entführen, Parameter zwei: Requisite: Objekteigenschaften entführen , Parameter drei: Vakuum: neuer Attributwert, p: sich selbst

Beispiel:

   // 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属性

Zusammenfassung:

vue2 entführt jede Eigenschaft im Objekt über Object.defineProperty

vue3 entführt jede Eigenschaft im Objekt über Proxy Ein Attribut

[Verwandte Empfehlung: „

vue.js Tutorial

“]

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen der bidirektionalen Bindung von vue2 und vue3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!