1 、 Uhr
理解: Listener, hören Sie sich die Änderung bestimmter Daten an, um einige Vorgänge auszuführen. Wenn sich die Daten in den Daten ändern, führen Sie einige teure oder asynchrone Vorgänge aus
1. Überwachen Sie die Daten des Wertetyps (einfacher Typ)
// In einer Vue- Instanz neuer Vue ({ el: "#myApp" , Daten: { num1: 1 , num2: 2 }, Methoden: {}, watch: { // Die beiden Attribute hier sind der erste Wert Der letzte Wert nach der Änderung, der zweite vor der Änderung num1 (nach, vor) { this .num2 = nach +1 } sofort: true // Überwachen, wann die Seite zum ersten Mal geladen wird. // Die Bedeutung hier ist, überwachen Sie num1 Änderungen, wenn sich die Daten von num1 ändern, bewirken den Wert von num2 } })
2. Überwachen Sie die Daten des Referenztyps (komplex)
new Vue ({
el: "# myApp",
data: {
obj: {
userName: "caicai"
}
},
watch: {
obj: {
handler (newValue, oldValue) {
// Handlerfunktion ist, wenn sich Ihr obj ändert Was tun Sie, wenn Sie
console.log (newValue.userName, oldValue.userName);
},
deep: true // Ob tief zugehört werden soll , true on, false off, default false
// Nach dem Hinzufügen von deep entspricht es dem Objekt obj Der Handler-Listener wird zu den Attributen der ersten Ebene hinzugefügt. Andernfalls wird nur die Referenzadresse gehört und die Handler-Funktion wird nicht ausgeführt.
}
}
});
2. Das
berechnete Verständnis: Das Berechnen von Attributen besteht, wie der Name schon sagt, darin, ein bestimmtes Attribut durch ein bestimmtes Attribut (Daten) zu berechnen. Dieser entscheidende Punkt ist die Berechnung. Wir möchten die Daten abrufen und verarbeiten, um das Berechnungsergebnis zu erhalten.
In der ursprünglichen Vorlage für die Vue-Vorlage bestand die ursprüngliche Absicht des Autors darin, einige einfache Operationen auszuführen. Anschließend können komplexere Berechnungen mithilfe von Berechnungen durchgeführt werden
<div id = "myApp">
<input type = "text" v-model = "str">
1. Die erste in die Vorlage geschriebene Operation führt dazu, dass die Vorlage zu schwer und schwer zu pflegen ist.
<p> {{str.split ("") .reverse (). join ("")}} </ p>
2. Die zweite Methode wird mit einer Methode aufgerufen. Wenn sie an mehreren Stellen verwendet wird, wird sie mehrmals ausgeführt, wodurch die Laufgeschwindigkeit und die Leistung verringert werden.
<p > {{fn (str)}} </ p>
3. Die dritte Art verwendet Filter und verfügt über einen Cache. Solange sich str nicht ändert, wird es nicht erneut ausgeführt.
<p> {{reverseStr}} </ p>
</ div>
<script type = "text / javascript">
neuer Vue ({
el: "# myApp",
Daten: {
str: "abcd"
},
Methoden: {
fn (v) {
// Wenn mehr Aufrufe vorhanden sind,
Führen Sie mehrere Rückgaben v.split ("") aus. Reverse (). Join ("") // Explode - Reverse - Kombination
}
},
berechnet: {
reverseStr () {
// Wenn sich der str nicht ändert, führe ich ihn nur einmal aus, wobei der Cache
this.str.split (""). Reverse (). Join ("")
}
}
})
</ script> zurückgibt
Hier werde ich den Unterschied zwischen den beiden und dem
berechneten Szenario kurz zusammenfassen :
1. Überwachen Sie die von Ihnen definierten Variablen, die nicht mehr in den Daten deklariert werden müssen. Der Funktionsname ist der Variablenname
2, der für mehrere Variablen oder Objekte geeignet ist, um nach der Verarbeitung einen Wert (Ergebnis) zurückzugeben Wenn sich eine dieser mehreren Variablen ändert, ändert sich das Ergebnis.
3. Das Ergebnis der Berechnung hat einen Cache, der von der Änderung der Responsive-Eigenschaft abhängt. Die Responsive-Eigenschaft ändert sich nicht und das Ergebnis wird direkt aus dem Cache gelesen.
4. Fügen Sie beim Aufrufen der internen Funktion nicht () hinzu.
5. Sie müssen return verwenden, um zurückzukehren.
6. Führen Sie keine Zuweisungsoperationen für die Daten in den berechneten Daten durch, da dies eine Endlosschleife bildet.
Uhr:
1. Die Überwachungsfunktion muss nicht aufgerufen werden.
2. Der Schwerpunkt liegt auf der Überwachung. Wenn sich die Überwachungsdaten ändern, wird die Rückruffunktion ausgeführt.
3. Wenn wir asynchrone oder teure Vorgänge ausführen müssen, wenn sich die Daten ändern, sollten wir watch
4 verwenden. Der Funktionsname ist der Name der Daten, die Sie überwachen möchten
Anwendungsszenario:
berechnet:
1. Wenn ein erforderliches Ergebnis von mehreren Daten beeinflusst wird, z. B. dem Warenkorbabrechnungsbetrag (an vielen Stellen vorbehaltlich der Preisabrechnung).
2. Bearbeiten Sie ein Attribut, führen Sie eine komplexe Logik aus und verwenden Sie das Ergebnis an mehreren Stellen.
3. Dieses Ergebnis wird an vielen Stellen in der internen Funktion verwendet.
Beobachten Sie:
1. Überwachen Sie die spezielle Verarbeitung einiger Eingabefeldwerte, die für eine Daten geeignet sind, um mehrere Daten zu beeinflussen.
2. Wenn sich die Daten ändern, führen Sie einige asynchrone Operationen oder Operationen mit relativ hohem Overhead aus
3. Aktualisiertes
Verständnis: Dies ist eine Hook-Funktion im Vue-Lebenszyklus. Die Datenaktualisierung löst die Ansichtsaktualisierung aus. Hier ist der Vorgang, nachdem die Ansichtsaktualisierung hier durchgeführt werden kann.
Auslösebedingungen:
1. Wenn sich die in Daten definierten Daten ändern, wird die aktualisierte Methode geladen.
2. Jede Datenaktualisierung, wenn Sie eine einheitliche Geschäftslogikverarbeitung durchführen möchten
3. Vermeiden Sie in den meisten Fällen, den Status während dieses Zeitraums zu ändern, da dies zu einer Endlosschleife von Aktualisierungen führen kann. Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen.
Funktionen:
1. Wenn es ausgeführt wird, ändern sich die Daten und die Schnittstelle wird aktualisiert.
2. Die Routing-Daten (wie die Parameter in der URL) können nicht abgehört werden.
3. Alle Datenänderungen werden aufgerufen (Verbrauchsleistung).
4. Solange die Daten auftreten Ändern, wird jedes Mal der gleiche Code ausgelöst