Detaillierte Erläuterung des Grafikbeispiels für Vue-Überwachungsattribute

Was ist die Listener-Eigenschaft?

🥰Das sogenannte Monitoring dient dazu, den Status oder die Eigenschaftsänderungen von integrierten Objekten zu überwachen und darauf zu reagieren. Durch das Überwachen von Eigenschaften können Sie Änderungen in anderen Daten überwachen.

Was ist der Unterschied zwischen Abhöreigenschaften und Berechnungseigenschaften?

Berechnete Eigenschaften werden zwischengespeichert und die Ergebnisse werden neu berechnet und das DOM wird aktualisiert, nachdem sich der abhängige Wert geändert hat.

Die Eigenschaft überwacht den Eigenschaftswert und wenn sich der definierte Wert ändert, wird die entsprechende Funktion ausgeführt.

Der Hauptunterschied in der Verwendung:

Berechnete Eigenschaften können keine asynchronen Aufgaben ausführen. Berechnete Eigenschaften werden im Allgemeinen nicht zum Anfordern von Servern oder zum Ausführen asynchroner Aufgaben verwendet, da dies lange dauern kann und unsere berechneten Eigenschaften in Echtzeit aktualisiert werden müssen. Daher kann diese asynchrone Aufgabe mithilfe der Listening-Eigenschaft ausgeführt werden.

Mit einem Wort: Was die Berechnung leisten kann, kann die Uhr leisten, und was die Berechnung nicht leisten kann, kann die Uhr auch leisten

Verwendung von Monitoring-Eigenschaften

Verwenden Sie das Konfigurationselement „watch“ und schreiben Sie die zu überwachende Eigenschaft in das Konfigurationselement. Jede Änderung des Eigenschaftswerts löst den Rückruf der Handlerfunktion aus. Sie können auch Änderungen an berechneten Eigenschaften überwachen.

Beispiel:

Änderungen im Eingabefeld überwachen

Code

<Vorlage>
<div Klasse="Haupt">
    Ich: <el-input v-model="name" placeholder="Bitte geben Sie Ihren Namen ein"></el-input>
    Freund 1<el-input v-model="friends.friend_1" placeholder="Bitte geben Sie Ihren Namen ein"></el-input>
    Freund 2<el-input v-model="friends.friend_2" placeholder="Bitte geben Sie Ihren Namen ein"></el-input>
</div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten(){
    zurückkehren {
      Name: „Romantischer Coder“,
      Freunde: {Freund_1:'Freund der anderen', Freund_2:'Freund der anderen'}
    }
  },
  betrachten:{
    Name:{
      handler(newValue,oldValue){ //newValue neuer Wert, oldValue Wert vor der Änderung console.log(newValue,oldValue)
        this.friends.friend_1='Wang Wu'
      }
    },
    //Überwachen Sie die Änderung eines bestimmten Attributs in der mehrstufigen Struktur „friends.friend_1“:{
      handler(neuerWert,alterWert){
        console.log(neuerWert,alterWert)
      }
    },
    'Freunde.Freund_2':{
      handler(neuerWert,alterWert){
        console.log(neuerWert,alterWert)
      }
    },
  }
};
</Skript>

Umfassende Überwachung

Wenn unser Objekt eine mehrschichtige Struktur hat, müssen wir viele Eigenschaften des Objekts überwachen und vermeiden, jede Eigenschaft einzeln zu schreiben. Zu diesem Zeitpunkt wird eine gründliche Überwachung verwendet.

Setzen Sie in der Überwachungskonfiguration im Überwachungseigenschaftsobjekt „deep“ auf „true“, um Werteänderungen innerhalb mehrstufiger Objekte oder Arrays zu überwachen.

 betrachten:{
    //Überwachen Sie die Änderungen aller Attribute in der mehrstufigen Struktur friends:{
      handler(neuerWert,alterWert){
        console.log(neuerWert,alterWert,"aa")
      },
      deep:true, //tiefes Monitoring aktivieren}
  }

Hinweis: Hier liegt ein Problem vor. Werden die neuen und alten Werte bei einer gründlichen Überwachung gleich sein?

Grund:

Offizielle Erklärung:

Beim Mutieren (nicht Ersetzen) eines Objekts oder Arrays ist der alte Wert mit dem neuen Wert identisch, da ihre Referenzen auf dasselbe Objekt/Array verweisen. Vue behält keine Kopie des Wertes vor der Mutation

Dies führt zu einer Änderung des Zeigers. In meinem Artikel „Wissen Sie, wie man JS tief kopiert?“ habe ich über Datenspeicherung gesprochen.

Jetzt anrufen

Gleich wie der Speicherort der tiefen Konfiguration.

Immediate Auf true setzen, um den aktuellen Handler-Callback sofort auszulösen

  betrachten:{
    Name:{
      handler(newValue,oldValue){ //newValue neuer Wert, oldValue Wert vor der Änderung console.log(newValue,oldValue)
        this.friends.friend_1='Wang Wu'
      },
      sofort: wahr
    },
  }

Es wird einmal ausgeführt, wenn die Seite geladen wird, daher sind die alten Daten undefiniert

Abschließende Gedanken

Die Überwachungs- und Abhöreigenschaft kann normalerweise verwendet werden, um Daten dauerhaft zu speichern, Ereignisse zu versenden und synchron/asynchron auszuführen, das Format zu überprüfen usw.

Dies ist das Ende dieses Artikels über Vue-Listening-Eigenschaften. Weitere relevante Vue-Listening-Eigenschaften finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!