So verwenden Sie die Uhr in Vue

Dieses Mal zeige ich Ihnen, wie Sie die Uhr in Vue verwenden. Was sind die Vorsichtsmaßnahmen, wenn Sie die Uhr in Vue verwenden?

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, damit sie reagiert.

Standardmäßig überwacht der Handler nur die Änderung der Referenz des Attributs obj. Er überwacht sie nur, wenn wir obj einen Wert zuweisen Hook-Funktion zum Überwachen von obj. Neu zuweisen:

mounted: {
 this.obj = {
  a: '456'
 }
}

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

zur Überwachung verwenden.

watch: {
 'obj.a': {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true,
  // deep: true
 }
}

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Uhr in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!