Heim > Artikel > Web-Frontend > Zusammenfassung der Verwendung von watch in Vue
Dieses Mal werde ich Ihnen eine Zusammenfassung der Vorsichtsmaßnahmen bei der Verwendung von Watch in Vue geben. Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Angenommen, es gibt den folgenden Code:<p> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </p> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: { firstName(newName, oldName) { this.fullName = newName + ' ' + this.lastName; } } })Der obige Code bewirkt, dass wacth bei der Eingabe von firstName den neuen Wert jeder Änderung überwacht und dann fullName berechnet und ausgibt. Handler-Methode und unmittelbares AttributEine Funktion von watch besteht darin, dass sie bei der anfänglichen Bindung nicht ausgeführt wird und die Überwachungsberechnung erst ausgeführt wird, wenn sich firstName ändert. Was also, wenn wir die Änderung ausführen möchten, wenn sie ursprünglich gebunden ist? Wir müssen die Art und Weise ändern, wie wir watch schreiben.
watch: { firstName: { handler(newName, oldName) { this.fullName = newName + ' ' + this.lastName; }, // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法 immediate: true } }Haben wir eine Handler-Methode an firstName gebunden? Standardmäßig wird dieser Handler, Vue.js, diese Logik verarbeiten, und die endgültige kompilierte Version ist tatsächlich dieser Handler. Und „immediate: true“ bedeutet, dass die darin enthaltene Handler-Methode sofort ausgeführt wird, wenn sie in „wacth“ deklariert wird. Wenn sie „false“ ist, ist der Effekt derselbe wie bei unserem vorherigen und wird nicht ausgeführt beim Binden umsetzen.
Deep-Attribut
Es gibt auch ein Attribut „Deep“ in der Überwachung. Der Standardwert ist „false“, der angibt, ob es ein Attribut „Deep“ gibt in unseren Daten:
<p> <p>obj.a: {{obj.a}}</p> <p>obj.a: <input type="text" v-model="obj.a"></p> </p> new Vue({ el: '#root', data: { obj: { a: 123 } }, watch: { obj: { handler(newName, oldName) { console.log('obj.a changed'); }, immediate: true } } })Als wir die Datenansicht in das Eingabefeld eingegeben haben, um den Wert von obj.a zu ändern, stellten wir fest, dass er ungültig war. Aufgrund der Einschränkungen des modernen Standardmäßig überwacht der Handler nur Änderungen in der
-Referenz des obj-Attributs. Er überwacht Änderungen nur, wenn wir obj einen Wert zuweisen 🎜>Ereignis Obj in der Hook-Funktion neu zuweisen: mounted: {
this.obj = {
a: '456'
}
}
Nur so wird unser Handler ausgeführt und print obj.a geändert.
Im Gegenteil, was ist, wenn wir den Wert des Attributs a in obj überwachen müssen? Dann ist das Attribut „deep“ praktisch!
watch: { obj: { handler(newName, oldName) { console.log('obj.a changed'); }, immediate: true, deep: true } }
tief bedeutet, dass der Listener Schicht für Schicht durchläuft und diesen Listener zu allen Eigenschaften des Objekts hinzufügt. Der Leistungsaufwand ist jedoch sehr groß Handler in diesem Listener.
Optimierung, wir können die
Zeichenfolge zur Überwachung verwenden. watch: {
'obj.a': {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
// deep: true
}
}
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Zusammenfassung der Verwendung des NodeJS-Protokollmoduls Winstonvue+vue-router+vuex-Betrieb BerechtigungenDas obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von watch in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!