So verwenden Sie berechnete Attribute, um reaktionsfähige Daten in Vue zu verarbeiten

Vue ist ein progressives JavaScript-Framework zum Erstellen von Benutzeroberflächen. In Vue ist die reaktionsfähige Aktualisierung von Daten eine der leistungsstärksten Funktionen von Vue. In Vue ist die Datenbindung einseitig, d. h. Änderungen an Daten wirken sich auf die Schnittstelle aus, Vorgänge auf der Schnittstelle (z. B. Benutzereingaben usw.) wirken sich jedoch nicht auf die Daten aus. Diese Datenaktualisierungen werden automatisch über die berechnete Eigenschaft in Vue durchgeführt.

Die berechnete Eigenschaft ist eine Methode, die in Vue zur Verarbeitung reaktionsfähiger Daten verwendet wird. Ihr Kern ist eine berechnete Eigenschaft. Im Vergleich zu den Methoden in Vue konzentriert sich das berechnete Attribut mehr auf die Verarbeitung von Daten, die Berechnung und das Daten-Caching, sodass Vue Daten effizienter aktualisieren kann. In diesem Artikel werden die Verwendung des berechneten Attributs und die damit verbundenen Vorsichtsmaßnahmen vorgestellt.

Grundlegende Verwendung berechneter Attribute

Die Methode zum Deklarieren berechneter Attribute in Vue ist sehr einfach. Fügen Sie einfach ein berechnetes Objekt zur Vue-Instanz hinzu, zum Beispiel:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

Im obigen Code deklarieren wir eine Vue-Instanz und A Die Eigenschaft „reversedMessage“ ist im berechneten Objekt definiert, das die Nachrichteneigenschaft zur Berechnung verwendet. Wenn sich der Wert des Nachrichtenattributs ändert, aktualisiert Vue automatisch den berechneten Wert von reversedMessage und rendert ihn an die Schnittstelle.

Es ist zu beachten, dass das berechnete Attribut eine Funktion sein muss. Diese Funktion kann Parameter empfangen oder nicht. Verwenden Sie dies innerhalb der Funktion, um auf die Daten in der Vue-Instanz zuzugreifen, aber nicht direkt auf die Variablen.

Darüber hinaus wird der Wert des berechneten Attributs zwischengespeichert und nur dann neu berechnet, wenn sich die abhängigen Daten ändern, was die Effizienz von Vue erheblich verbessern kann. Wenn beispielsweise im obigen Beispiel der Wert des Nachrichtenattributs unverändert bleibt, wird der berechnete Wert im Cache jedes Mal, wenn das ReversedMessage-Attribut gelesen wird, direkt zurückgegeben und nicht neu berechnet.

Erweiterte Verwendung des berechneten Attributs

Der Setter im berechneten Attribut

berechnetes Attribut kann nicht nur zum Lesen von Daten, sondern auch zum Festlegen von Daten verwendet werden. Die im berechneten Attribut definierte Set-Methode wird aufgerufen, wenn dem Attribut ein Wert zugewiesen wird. Zum Beispiel:

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      set: function (newVal) {
        var names = newVal.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

Im obigen Beispiel haben wir ein fullName-Attribut definiert, das lesbar und beschreibbar ist. Wir haben eine Get-Methode definiert, die die kombinierte Zeichenfolge aus Vorname und Nachname zurückgibt. Gleichzeitig wird auch eine Set-Methode definiert, die einen Parameter newVal empfängt und die Werte von firstName und lastName entsprechend diesem Parameter festlegt. Es ist zu beachten, dass die Setter-Funktion im berechneten Attribut keinen Wert zurückgibt.

Abhängigkeiten berechneter Attribute

Die Berechnung berechneter Attribute basiert auf den Attributen, von denen sie abhängt. Wenn sich die abhängigen Eigenschaften ändern, werden die berechneten Eigenschaften automatisch neu berechnet. Vue kann mithilfe des Abhängigkeitsverfolgungsmechanismus automatisch Abhängigkeiten erfassen, die in berechneten Attributen verwendet werden. Beispiel:

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      console.log('computed fullName')
      return this.firstName + ' ' + this.lastName
    },
    reversedName: function () {
      console.log('computed reversedName')
      return this.fullName.split('').reverse().join('')
    }
  }
})

console.log(vm.reversedName)
vm.firstName = 'Tom'
console.log(vm.reversedName)

Im obigen Code hängen sowohl fullName als auch reversedName von den beiden Eigenschaften firstName und lastName ab. Wenn wir auf die Eigenschaft „reversedName“ zugreifen, berechnet Vue automatisch die Werte von fullName und reversedName und gibt den berechneten fullName und den berechneten reversedName aus. Wenn der Wert von firstName geändert wird, berechnet Vue die Werte von fullName und reversedName neu und gibt den berechneten fullName und den berechneten reversedName aus.

Es ist zu beachten, dass der Getter im berechneten Attribut asynchron aufgerufen wird, wenn sich die Daten ändern, von denen das berechnete Attribut abhängt. Das bedeutet, dass Vue den Wert der berechneten Eigenschaft nicht sofort aktualisiert, wenn sich die abhängigen Daten ändern, sondern in der nächsten Ereignisschleife. Dadurch wird unnötiger Leistungsaufwand vermieden.

Der Unterschied zwischen berechneten Attributen und Überwachungsattributen

Zusätzlich zu den berechneten Attributen bietet Vue auch eine weitere Methode zur Verarbeitung reaktionsfähiger Daten – Überwachungsattribute. Sie alle verfügen über die Fähigkeit, reaktive Daten zu verarbeiten, unterscheiden sich jedoch in der Art und Weise, wie sie diese implementieren.

Das Watch-Attribut ist ein Listener. Wenn sich Daten ändern, führt das Watch-Attribut sofort eine Antwortfunktion aus und hat den Nebeneffekt, dass es die Daten verarbeitet. Zum Beispiel:

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe',
    fullName: ''
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

Im obigen Beispiel haben wir das Watch-Attribut definiert, um auf Datenänderungen zu warten und den Wert des fullName-Attributs zu aktualisieren, wenn sich firstName oder lastName ändert. Es ist zu beachten, dass die Verarbeitungsfunktion im Watch-Attribut sofort ausgeführt wird, wenn sich die Daten ändern.

Der größte Unterschied zwischen dem berechneten Attribut und dem Überwachungsattribut liegt in ihren Implementierungs- und Verwendungsszenarien. Das berechnete Attribut eignet sich besser für die Verarbeitung sich wiederholender Vorgänge wie Datenberechnung und Zwischenspeicherung, was die Effizienz von Vue erheblich verbessern kann. Das Watch-Attribut eignet sich besser zum Überwachen von Datenänderungen, z. B. zum Auslösen von Animationseffekten oder zum Senden von Anforderungen und anderen Nebeneffektvorgängen, wenn sich die Daten ändern.

Fazit

In Vue ist das berechnete Attribut eine der gebräuchlichsten Methoden zum Umgang mit reaktiven Daten. Das berechnete Attribut ermöglicht es uns, Daten präziser und effizienter zu verarbeiten, wiederholte Berechnungen zu vermeiden und verbessert außerdem die Leistung von Vue. Wenn Sie das berechnete Attribut verwenden, müssen Sie auf die Setter-Funktion, die Abhängigkeiten im berechneten Attribut und den Unterschied zwischen dem berechneten Attribut und dem Überwachungsattribut achten.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie berechnete Attribute, um reaktionsfähige Daten in Vue zu verarbeiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!