Detaillierte Beispiele für den Unterschied zwischen den Methoden watch und computed in Vue.js

Vorwort

Dieser Artikel beschreibt hauptsächlich kurz den Unterschied zwischen Uhr und Computer in Vue sowie Methoden

Lassen Sie uns zunächst über die Unterschiede zwischen diesen sprechen. Natürlich sehen sie anders aus~~~,

Hahahaha, keine Witze mehr, kommen wir zur Sache.

einführen

Methoden: Auf einem Objekt montierte Funktionen, normalerweise die Vue-Instanz selbst oder eine Vue-Komponente

Die Eigenschaft computer: sieht aus wie eine Methode, ist aber keine. In Vue verwenden wir im Allgemeinen Daten, um Änderungen an Feature-Eigenschaften zu verfolgen. Berechnete Eigenschaften ermöglichen uns, eine Eigenschaft zu definieren, die auf die gleiche Weise wie Daten funktioniert, aber auch eine benutzerdefinierte Logik basierend auf ihren Abhängigkeiten haben kann. Sie könnten berechnete Eigenschaften als eine weitere Ansicht Ihrer Daten betrachten.

Ansehen: So können Sie das Reaktivitätssystem besser verstehen. Wir stellen einige Hooks bereit, um beliebige Eigenschaften des Vue-Stores zu beobachten. Wenn wir bei jeder Änderung eine neue Funktionalität hinzufügen oder auf eine bestimmte Änderung reagieren möchten, können wir eine Eigenschaft beobachten und eine Logik anwenden. Dies bedeutet, dass der Name des Beobachters mit dem übereinstimmen muss, was wir beobachten.

Diese wenigen Sätze allein können den Unterschied zwischen den dreien nicht erklären. Nehmen wir ein Beispiel:

1. Wirkungsmechanismus

computed\watch:watch und computed basieren auf dem Abhängigkeitsverfolgungsmechanismus von Vue. Beide versuchen, mit folgendem umzugehen: Wenn sich bestimmte Daten (abhängige Daten genannt) ändern, ändern sich alle „verwandten“ Daten, die von diesen Daten abhängen, „automatisch“, d. h. die verwandten Funktionen werden automatisch aufgerufen, um die Datenänderung zu realisieren.

Methoden: Methoden werden zum Definieren von Funktionen verwendet. Offensichtlich müssen sie manuell aufgerufen werden, um ausgeführt zu werden. Im Gegensatz zu Watch und Computed führen sie vordefinierte Funktionen nicht „automatisch aus“.

[Zusammenfassung]: Die in den Methoden definierten Funktionen müssen aktiv aufgerufen werden, während die mit der Überwachung und Berechnung verbundenen Funktionen automatisch aufgerufen werden, um das gewünschte Ergebnis zu erzielen.

2. Aus der Natur

1. Die Funktion ist in Methoden definiert und Sie müssen sie offensichtlich wie „fuc()“ aufrufen (vorausgesetzt, die Funktion ist fuc).

2. „Berechnet“ ist ein berechnetes Attribut, das tatsächlich vom gleichen Typ ist wie das Datenattribut im Datenobjekt (in Bezug auf die Verwendung).

Zum Beispiel:

berechnet:{
   fullName: Funktion () { returniere dies.Vorname + Nachname }
} 

Wenn Sie darauf zugreifen, verwenden Sie this.fullName, um darauf zuzugreifen, genau wie beim Zugriff auf Daten (rufen Sie es nicht als Funktion auf!!)

3. Beobachten: Ähnlich wie Überwachungsmechanismus + Ereignismechanismus

Zum Beispiel:

betrachten:
   Vorname: Funktion (Wert) { dieser.vollständigerName = Wert + dieser.nachname }
}

Die Änderung des Vornamens ist die Voraussetzung für das Auslösen dieses speziellen „Ereignisses“, und die dem Vornamen entsprechende Funktion entspricht der Methode, die nach dem Auftreten des Ereignisses ausgeführt wird.

3. Vergleich zwischen Uhr und Computer

betrachten	berechnet
Eine Angabe beeinflusst mehrere Angaben	Ein Datum wird von mehreren Daten beeinflusst

watchcomputedEin Datum beeinflusst mehrere DatenEin Datum wird von mehreren Daten beeinflusst

4. Methoden verarbeiten keine Datenlogikbeziehungen, sondern stellen nur aufrufbare Funktionen bereit

Im Vergleich zu Watch/Computed verarbeiten Methoden keine Datenlogikbeziehungen, sondern stellen nur aufrufbare Funktionen bereit.

neuer Vue({
  el: '#app',
  Vorlage: '<div ><p>{{ say() }}</p></div>',
  Methoden: {
    sagen wir: function () {
      Rückkehr „Mir geht es im Ausland gut“
    }
  }
})

5. Betrachten Sie die Beziehung zwischen Methoden, Beobachtungen und Berechnungen aus der Perspektive der funktionalen Komplementarität

In vielen Fällen wird „computed“ verwendet, um Situationen zu behandeln, die Sie bei Verwendung von „watch“ und „methods“ nicht behandeln können oder die nicht richtig behandelt werden. Verwenden Sie „computed“, um wiederholte Berechnungen in Methoden zu behandeln.

1. Die Funktionen in den Methoden sind nur ein Haufen „ehrlicher Jungs“. Wenn eine andere übergeordnete Funktion sie aufruft, wird sie jedes Mal „gehorsam“ ausgeführt und gibt die Ergebnisse zurück, auch wenn diese Ergebnisse wahrscheinlich gleich und unnötig sind.

2. Computed ist ein „intriganter Junge“. Es basiert auf dem von Vue bereitgestellten Abhängigkeitsverfolgungssystem. Solange sich die abhängigen Daten nicht geändert haben, wird Computed keine erneute Berechnung durchführen.

6. Verwenden Sie berechnete, um das Phänomen der Coderedundanz in der Uhr unter bestimmten Umständen zu behandeln und den Code zu vereinfachen

Zusammenfassen

berechnet

1. Berechnete Eigenschaftswerte werden standardmäßig zwischengespeichert. Berechnete Eigenschaften werden basierend auf ihren reaktionsfähigen Abhängigkeiten zwischengespeichert, d. h. sie werden basierend auf den in Daten deklarierten Daten berechnet.
2. Wenn ein Attribut aus anderen Attributen berechnet wird, hängt dieses Attribut von anderen Attributen ab, es ist eine Viele-zu-eins- oder Eins-zu-eins-Beziehung. Verwenden Sie im Allgemeinen berechnete
3. Wenn der Attributwert einer berechneten Eigenschaft eine Funktion ist, wird standardmäßig die Get-Methode verwendet. Der Rückgabewert der Funktion ist der Attributwert der Eigenschaft. In berechneten Eigenschaften verfügt die Eigenschaft über eine Get-Methode und eine Set-Methode, und die Set-Methode wird aufgerufen, wenn sich die Daten ändern.
4. Berechnete Eigenschaften sind zwischengespeicherte Berechnungen basierend auf Abhängigkeiten und werden nur bei Bedarf aktualisiert.

betrachten

Die Überwachungsfunktion empfängt zwei Parameter: Der erste Parameter ist der letzte Wert, der zweite Parameter ist der Wert vor der Eingabe.

Damit ist dieser Artikel über den Unterschied zwischen den Methoden „watch“ und „computed“ in vue.js zu Ende. Weitere Informationen zum Unterschied zwischen den Methoden „watch“ und „computed“ in vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!