Proxy realisiert das Prinzip der bidirektionalen Bindung von Vue3-Daten

1. Vorteile von Proxy gegenüber Object.defineProperty

Vorteile eines Proxys:

• Proxy kann Objekte statt Eigenschaften direkt überwachen;
• Proxy kann Array-Änderungen direkt überwachen;
• Proxy verfügt über bis zu 13 Abfangmethoden, darunter „apply“, „ownKeys“, „deleteProperty“, „has“ usw., die in „Object.defineProperty“ nicht verfügbar sind.
• Proxy gibt ein neues Objekt zurück. Wir können nur mit dem neuen Objekt arbeiten, um unser Ziel zu erreichen, während Object.defineProperty nur die Objekteigenschaften durchlaufen und sie direkt ändern kann.
• Als neuer Standard wird Proxy im Mittelpunkt der kontinuierlichen Leistungsoptimierung der Browserhersteller stehen, was den legendären Leistungsbonus des neuen Standards darstellt.

Vorteile von Object.defineProperty:

Gute Kompatibilität: Unterstützt IE9, aber Proxy weist Browser-Kompatibilitätsprobleme auf, die nicht mit Polyfill behoben werden können. Daher gab der Autor von Vue an, dass bis zur nächsten Hauptversion (3.0) gewartet werden müsse, um es mit Proxy neu zu schreiben.

2. Einfache Implementierung eines Proxy-Überwachungsobjekts

1. Einfache Implementierung eines Proxy-Objekts

```Javascript
let data = {}; // Definieren Sie ein leeres Objekt let proxy = new Proxy(data, {}); // Erstellen Sie einen Proxy und verwenden Sie Daten als Zielobjekt // Ändern Sie das Namensattribut des Proxy-Proxy-Objekts proxy.name = 'shelley';
Konsole.log(Proxy); 
console.log(Daten)
// { Name: "Shelley" }
// { Name: "Shelley" }

```

2. Ergänzendes Wissen Reflect

Reflect -Objekt ist, wie das Proxy-Objekt, ebenfalls eine neue von ES6 bereitgestellte API zur Manipulation von Objekten.

Wir müssen ein Reflect.set(... arguments ) in handler.set() zurückgeben, um es dem Zielobjekt zuzuweisen.

• Die Methode Reflect.set setzt die Namenseigenschaft des Zielobjekts gleich dem Wert. Wenn das Namensattribut einer Funktion zugewiesen wird, wird das This der Funktion an den Empfänger gebunden.
• Die Methode Reflect.get sucht die Eigenschaft „Name“ des Zielobjekts und gibt sie zurück. Wenn keine solche Eigenschaft vorhanden ist, wird „undefined“ zurückgegeben.

3. Proxy-Methode

Die Attribute der Methode handler.set() legen den Catcher für die Operation fest.

```Javascript
lass Daten = {
  Name: 'Shelley',
  Alter: '27'
};
let p = neuer Proxy(Daten, {
  setze(Ziel, Eigenschaft, Wert) {
    // Ziel = Zielobjekt // Eigenschaft = festgelegte Eigenschaft // Wert = geänderter Wert console.log(Ziel, Eigenschaft, Wert); // { Name: 'shelley', Alter: '27' } Alter 18
    gibt Reflect.set(...Argumente) zurück;
  }
})
Seitenalter = 18;
console.log(Daten); // { Name: 'shelley', Alter: 18 }
```

- handler.get() Erfassung von Attribut-Lesevorgängen.

```Javascript
lass Daten = {
  Name: 'Shelley',
  Alter: 22
};
let p = neuer Proxy(Daten, {
  bekomme(Ziel, Eigenschaft){
    console.log(target, prop); //{ Name: 'shelley', Alter: 22 } Alter
    gibt Reflect.get(...Argumente) zurück;
  }
})
console.log(Seite);//22
```

Einfache Implementierung des Überwachungsobjekts Object.defineProperty

```Javascript
var o = {}; // Neues Objekt erstellen var bValue = 39; // Dem Objekt eine Instanz der Accessor-Deskriptor-Eigenschaft hinzufügen Object.defineProperty(o, 'bValue', {  
  // Dieser Code setzt nicht die Eigenschaften von o, er führt nur get() aus, wenn auf { zugegriffen wird.
    gibt bValue zurück;
  },
  setze(neuerWert) {
    console.log('set==>', neuerWert);
    bWert = neuerWert;
  }
});
console.log(o) // {}
// Rufen Sie die Get-Methode der bValue-Eigenschaft des Accessor-Proxys auf, kehren Sie zurück und setzen Sie den Wert von bValue im o-Objekt auf 38
console.log(o.bWert); // 38
// Rufen Sie die Set-Methode der bValue-Eigenschaft des Accessor-Proxys auf und legen Sie den neuen Wert von bValue fest.
//Geben Sie get erneut ein und geben Sie return ein. Setzen Sie den Wert von bValue im o-Objekt auf 40.
o.bWert = 40;
console.log(o.bWert) // 40
```

Zusammenfassung:

• Im Vergleich zu es5 Object.defineProperty ist der es6-Proxy leistungsfähiger und bietet viele Methoden und kann sogar Proxy-Methoden bereitstellen.
• Warum verwendet Vue 3.0 den es6-Proxy, aber nicht 2.0? Weil es6 mit einigen Browsern nicht kompatibel ist, wie z. B. niedrigeren Versionen von IE, und daher nur verwendet wird, wenn **die meisten gängigen Browser kompatibel sind**

3. Handgeschriebener bidirektionaler Binding-ES6-Proxy für vue3.0

1. Was ist Proxy

• Proxy bedeutet auf Englisch „Agent“. Ein Agent ist ein Vermittler, den Sie verwenden, um etwas zu erhalten oder bestimmte Vorgänge daran auszuführen, anstatt direkt auf das Objekt einzuwirken.
• Unter Proxy versteht man das Einrichten einer Abfangschicht vor dem Zielobjekt. Jeder externe Zugriff auf das Objekt muss zunächst diese Abfangschicht passieren, sodass ein Mechanismus zum Abfangen oder Filtern externer Zugriffe bereitgestellt wird.

2. Verwenden Sie die bidirektionale Bindung in vue.js

```Javascript
<div id="app">
  <h2>{{msg}}</h2>
  <Eingabetyp="Text" v-Modell="Nachricht"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skript>
  lass vm = neues Vue({
  el: '#app',
  Daten: {
    Nachricht: „Shelley“
},
})
</Skript>


```

Proxy vs. Object.defineProperty

Zweiwegebindung in Vue 2.0, Verwendung von Object.defineProperty() für die Zweiwegebindung

Mangel:

• Es ist nicht möglich, das Array zu überwachen, aber die Array-Methoden (Push, Pop, Shift, Unshift usw.) neu zu schreiben. Führen Sie eine bidirektionale Bindung und Datenüberwachung durch.
• Schlechte Effizienz, hauptsächlich aufgrund einmaliger rekursiver Operationen auf mehreren Datenebenen. Bei großen oder tiefen Datenmengen ist die Leistung sehr schlecht.
• Aufgrund von Einschränkungen ist es nicht möglich, neu hinzugefügte/gelöschte Daten zu überwachen, daher wird in vue2.0 $set zum manuellen Hinzufügen verwendet.

– Object.definePorperty() durchläuft rekursiv alle Eigenschaften aller Objekte, was sich bei einer tiefen Datenhierarchie auf die Leistung auswirkt.

– Object.definePorperty() kann nur auf Objekten verwendet werden, nicht auf Arrays.

– Object.definePorperty() kann die Eigenschaften nur während der Definition überwachen, nicht neu hinzugefügte Eigenschaften.

– Da Object.definePorperty() nicht auf Arrays verwendet werden kann, überwacht vue2.0 Array-Daten durch Neuschreiben des Array-Methodenprototyps, kann aber weiterhin keine Änderungen an Array-Indizes und -Längen überwachen.

Zweiwegebindung in Vue 3.0, Verwendung von Proxy und Reflect für die Zweiwegebindung

Vorteil:

• Proxy kann Arrays und Objekte abfangen und überwachen

Mangel:

• Der Proxy löst mehrere Set/Get-Antworten aus

Lösung:

• ① Verwenden Sie eine Operation ähnlich dem debounce , um es so zu optimieren, dass sein Wert einmal reagiert
• ② (Lösung in vue3.0) Bestimmen Sie, ob der Schlüssel das eigene Attribut des Ziels ist und ob der Wert gleich Ziel [Schlüssel] ist, wodurch redundante Set / Get-Operationen vermieden werden können

Proxy kann nur eine Ebene proxyen und kann nicht tief überwachen

• ① Verwenden Sie eine tiefe Rekursion, um jede Ebene zu überwachen. Durch geschickte Verwendung von Reflect.get() werden die Eigenschaften der inneren Struktur des Objekts (der nächsten Ebene) zurückgegeben, es wird ermittelt, ob die nächste Ebene noch ein Objekt ist, und es werden tiefe Rekursionsvorgänge verwendet. Aber es hat einen großen Einfluss auf die Leistung
• ②Verwenden Sie schwache Map, verwenden Sie zwei schwache Mapps, um Originaldaten und Antwortdaten zu speichern. Beim Zugriff auf die Daten werden diese in den gespeicherten Daten gesucht. Wenn sie nicht gefunden werden, wird ein Proxy-Vorgang darauf ausgeführt.

Dies ist das Ende dieses Artikels über das Prinzip der Proxy-Implementierung der bidirektionalen Vue3-Datenbindung. Weitere relevante Inhalte zur Proxy-Implementierung der bidirektionalen Vue3-Datenbindung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!