Analyse der Gründe, warum Vue3 Proxy zur Implementierung der Datenüberwachung verwendet

Vue-Datenbindungsprinzip in beide Richtungen, aber diese Methode hat Mängel und kann keine Teilüberwachung von Arrays und Objekten implementieren. Weitere Einzelheiten finden Sie auch in einem Blog, den ich zuvor geschrieben habe: Lösung für Vues Unfähigkeit, Array- und Objektänderungen zu überwachen. Der neueste Proxy kann im Vergleich zu Object.defineProperty von Vue2 eine Verdoppelung der Geschwindigkeit und eine Halbierung des Speichers erzielen. Lassen Sie uns darüber sprechen, wie es implementiert wird und warum es im Vergleich zur alten Implementierungsmethode die Geschwindigkeit verdoppeln und den Speicher halbieren kann:

Vue-Initialisierungsprozess

Der Initialisierungsprozess von Vue umfasst Observer, Compiler und Watcher. Wenn wir ein neues Vue erstellen, wird Observer aufgerufen, um alle Eigenschaften der Daten, berechneten oder Props (wenn es eine Komponente ist) des Vue-Objekts über Object.defineProperty abzuhören. Gleichzeitig werden die Vorlagenanweisungen vom Compiler analysiert. Nachdem die Attribute analysiert wurden, wird ein neuer Watcher erstellt und die Update-Funktion an den Watcher gebunden. Der Observer und der Compiler werden über die Attribute verknüpft.

Objekt.defineProperty

Nehmen wir ein einfaches Object.defineProperty-Beispiel

Klasse Beobachter {
    Konstruktor(Daten) {
      // Durchlaufe die Eigenschaften der Parameterdaten und füge sie hierzu hinzu for (let key of Object.keys(data)) {
        if (Typ der Daten[Schlüssel] === "Objekt") {
          Daten[Schlüssel] = neuer Beobachter(Daten[Schlüssel]);
        }
        Object.defineProperty(dieser, Schlüssel, {
          aufzählbar: wahr,
          konfigurierbar: true,
          erhalten() {
            console.log("Sie haben besucht" + key); //Sie haben besucht Alter
            returniere Daten[Schlüssel];//20
          },
          setze(neuerWert) {
            console.log("Sie legen fest" + Schlüssel); //Sie legen das Alter fest
            console.log("neu" + Schlüssel + "=" + neuerWert); //neues Alter=20
            wenn (newVal === Daten[Schlüssel]) {
              zurückkehren;
            }
            Daten[Schlüssel] = neuerWert;
          }
        });
      }
    }
  }const obj = {
    Name: "App",
    Alter: "18",
    A: {
      b: 1,
      c: 2,
    }
  };const app = new Observer(obj);app.age = 20;console.log(app.age);app.newPropKey = "neue Eigenschaft";console.log(app.newPropKey); //neue Eigenschaft

Aus dem Obigen können wir erkennen, dass Object.defineProperty alle Eigenschaften durchlaufen muss. Das bedeutet, dass die Durchquerung viel langsamer ist, wenn die Datengröße in den Daten/Berechnungen/Eigenschaften des Vue-Objekts groß ist. Wenn die Datengröße in den Daten/Berechnungen/Eigenschaften des Vue-Objekts groß ist, muss Object.defineProperty die Änderungen aller Eigenschaften überwachen, was viel Speicher beansprucht.

Proxy

Schauen wir uns den Proxy an

Proxy-Objekte werden verwendet, um benutzerdefinierte Verhaltensweisen für grundlegende Vorgänge (wie etwa Eigenschaftssuche, Zuweisung, Aufzählung, Funktionsaufruf usw.) zu definieren.

Dies kann als das Setzen einer „Abfangschicht“ vor dem Objekt verstanden werden. Wenn auf das überwachte Objekt zugegriffen wird, muss es diese Abfangschicht passieren. Das ursprüngliche Objekt kann in dieser Interception verarbeitet werden und das erforderliche Datenformat kann zurückgegeben werden. Das heißt, unabhängig davon, auf welches Attribut des Objekts zugegriffen wird, ob es sich um ein zuvor definiertes oder ein neu hinzugefügtes Attribut handelt, wird es in der Interception verarbeitet. Dadurch wird das Problem der fehlenden Überwachung gelöst.

const obj = {
  Name: "krry",
  Alter: 24,
  Andere:
    Handy: "mi10",
    Uhr: "mi4",
  },};const p = neuer Proxy(obj, {
  get(Ziel, Schlüssel, Empfänger) {
    console.log("Die anzuzeigenden Eigenschaften sind: " + key);  
    return Reflect.get(Ziel, Schlüssel, Empfänger);
  },
  set(Ziel, Schlüssel, Wert, Empfänger) {
    console.log("Die festgelegte Eigenschaft ist: " + key); 
    console.log("Neue Eigenschaft: " + Schlüssel, "Wert: " + Wert); 
    Reflect.set(Ziel, Schlüssel, Wert, Empfänger);
  },});p.age = 22;console.log(p.age); p.single = "NO";console.log(p.single);p.others.shoe = "boost";console.log(p.others.shoe);Das Ausgabeergebnis ist:Die festgelegte Eigenschaft ist: age
Neues Attribut: Alter Wert: 22 Das anzuzeigende Attribut ist: Alter22

Die festzulegende Eigenschaft ist: single
Neues Attribut: single Wert: NO Zu betrachtendes Attribut: singleNO Zu betrachtendes Attribut: others
Die zu besichtigenden Eigenschaften sind: andere
Schub

Wie oben zu sehen ist, muss beim Hinzufügen oder Bearbeiten von Eigenschaften keine erneute Reaktionsfähigkeit hinzugefügt werden. Alles kann überwacht werden, da Proxy eine Operation für Objekte ist. Sobald Sie auf das Objekt zugreifen, gelangen Sie in die Logik von Proxy. Reflect ist ein integriertes Objekt, das Methoden zum Abfangen von JavaScript-Operationen bereitstellt. Diese Methoden sind dieselben wie die für Proxy-Handler. Reflect ist kein Funktionsobjekt und daher nicht konstruierbar. Der Unterschied zwischen Proxy und Object.defineProperty scheint in der Verwendung sehr ähnlich zu sein, aber Proxy fängt Eigenschaften tatsächlich in einer höheren Dimension ab.

In Object.definePropertyVue2 ist es für gegebene Daten wie { count: 1 } erforderlich, get und set basierend auf dem spezifischen Schlüssel, d. h. count, abzufangen:

Objekt.defineProperty(Daten, 'Anzahl', {
  erhalten() {},
  Satz() {},})

Sie müssen im Voraus wissen, welcher Schlüssel abgefangen werden soll. Aus diesem Grund ist Vue2 gegenüber neuen Attributen von Objekten machtlos. Daher ist es während der Initialisierung von Vue notwendig, die Daten zu durchlaufen, um die Datenänderungen beizubehalten, was zu einer langsameren Geschwindigkeit und einem größeren Speicherverbrauch führt.

Proxy Der von Vue3 verwendete Proxy fängt Folgendes ab:

neuer Proxy(Daten, {
  get(Schlüssel) { },
  set(Schlüssel, Wert) { },})

Wie Sie sehen, muss sich der Proxy nicht um den spezifischen Schlüssel kümmern. Er fängt die Änderung eines beliebigen Schlüssels in den Daten und das Lesen eines beliebigen Schlüssels in den Daten ab.

Daher werden sowohl vorhandene als auch neu hinzugefügte Schlüssel überwacht.

Damit ist dieser Artikel zur Analyse, warum Vue3 Proxy zur Implementierung der Datenüberwachung verwendet, abgeschlossen. Weitere Informationen dazu, warum Vue3 Proxy zur Implementierung der Datenüberwachung verwendet, 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!