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 Attribut

Eine 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

JavaScript (und der veralteten Funktion Object.observe) kann Vue das Hinzufügen oder Entfernen von Objekteigenschaften nicht erkennen. Da Vue bei der Initialisierung der Instanz den Getter/Setter-Konvertierungsprozess für die Eigenschaft durchführt, muss die Eigenschaft im Datenobjekt vorhanden sein, damit Vue sie konvertieren kann, sodass sie reagiert.

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 Winston

vue+vue-router+vuex-Betrieb Berechtigungen

Das 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!