Vue.js lernt berechnete Eigenschaften

Vorwort

Berechnete Attribute werden verwendet, um deklarativ zu beschreiben, dass ein Wert von anderen Werten abhängt. Wenn Sie Daten an eine berechnete Eigenschaft in einer Vorlage binden, aktualisiert Vue das DOM, wenn einer seiner abhängigen Werte zu einer Änderung der berechneten Eigenschaft führt. Diese Funktion ist sehr leistungsstark und kann Ihren Code deklarativer, datengesteuerter und einfacher zu warten machen.

Wenn Sie Vue verwenden, werden alle Daten in der Vorlage in das Datenattribut eingefügt. Wenn das Datenattribut zu viele Variablen enthält, haben Sie manchmal das Gefühl, dass einige Variablen nur einmal verwendet werden Später habe ich Kollegen in derselben Gruppe gesehen, die das berechnete Attribut verwendet haben, also habe ich die API noch einmal überprüft und festgestellt, dass die beste Lösung für die Verwendung in dieser Situation ist.

1. Computed kann die Vorlage übersichtlich halten. Versuchen Sie, sie nur in der Vorlage anzuzeigen und zu binden, anstatt logische Operationen hinzuzufügen.

2. Ein weiterer Vorteil der Verwendung von Berechnungen besteht darin, dass sie sich automatisch ändern, wenn sich andere Datenattribute ändern.

Zum Beispiel ein Beispiel aus dem offiziellen Dokument:

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 }
})
vm.$watch('firstName', function (val) {
 this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
 this.fullName = this.firstName + ' ' + val
})

Wenn Sie Watch verwenden, kommt es zu Code-Redundanz. Beispielsweise können Statusänderungen während der Live-Übertragung verwendet werden, um zu berechnen, ob übergeordnete Attribute wie Videos angezeigt werden sollen

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 computed: {
 fullName: function () {
  return this.firstName + ' ' + this.lastName
 }
 }
})

Zusammenfassung

Das Obige dreht sich alles um die berechneten Eigenschaften von Vue.js. Ich hoffe, dass der Inhalt dieses Artikels für das Studium oder die Arbeit von Nutzen sein kann. Sie können eine Nachricht hinterlassen, um zu kommunizieren.

Weitere Artikel zum Thema Vue.js zum Erlernen berechneter Eigenschaften finden Sie auf der chinesischen PHP-Website!