Vue.JS Watch -Eigenschaft

Vue.JS ist ein sehr leistungsfähiges und reaktives JavaScript-Framework, mit dem UIS (Benutzeroberflächen) und Spas (einseitige Anwendungen) erstellt werden können. Es wird gebaut, indem die besten Funktionen aus bereits vorhandenen Angular- und React -Frameworks kombiniert werden. Entwickler lieben es auch, Anwendungen darin zu codieren oder zu erstellen.

Vue.JS stellt die Watch -Eigenschaft zur Beobachtung und Reaktion auf die Variablen oder Datenänderungen zur Verfügung. Wir können die Watch -Eigenschaft verwenden, um das DOM zu manipulieren, wenn die beobachtete Variable geändert wird. In diesem Artikel werden wir uns ansehen, wie wir die Watch -Eigenschaft verwenden und die gewünschten Aufgaben für die Änderung der Variablen ausführen können. Also lasst uns anfangen.

Beobachter

A Beobachter in Vue.JS wirkt wie ein Event -Hörer einer Variablen oder Eigenschaft. Es wird verwendet, um mehrere Aufgaben über die Änderung einer bestimmten Eigenschaft zu erledigen. Es ist praktisch, wenn es asynchrone Aufgaben erledigt.

Lassen Sie uns das Konzept des Beobachters demonstrieren und verstehen, indem wir ein Beispiel in Betracht ziehen.

Beispiel:

Nehmen wir an, wir erstellen eine E-Commerce. In dieser Komponente müssen wir die Menge eines einzelnen Elements bezüglich der Anzahl der Elemente berechnen.

Erstens nehmen wir einige Eigenschaften in den Daten an.

Daten()
zurückkehren
ItemName: "Artikel 1",
ItemQuantity: NULL,
ItemPrice: 200,
TotalPrice: 0

,

In dem wir die Eigenschaft „ItemQuantity“ beobachten und den Gesamtpreis berechnen werden. Wir werden zuerst die Datenbindungen in der Vorlage durchführen,

Bevor Sie den Code schreiben, um die Variable anzuschauen und den Gesamtpreis zu berechnen.

Nachdem wir diesen Code geschrieben haben, haben wir unsere Webseite wie folgt:

Jetzt möchten wir den Gesamtpreis für die Änderung der „ItemQuantity“ ändern, wie wenn der Benutzer die Menge mithilfe des Eingabefeldes ändert. Der Gesamtpreis sollte sich ändern. Zu diesem Zweck müssen wir die „ItemQuantity“ beobachten und den Gesamtpreis berechnen, wenn sich die Eigenschaft „ItemQuantity“ verändert.

Der Beobachter für die „ItemQuantity“ wäre also wie folgt:

betrachten:
Artikel Menge()
Das.TotalPrice = this.ItemQuantity * dies.Stückpreis;
Konsole.Protokoll (dies.Artikel Menge);

Wenn der Benutzer nun die „Elementquantity“ ändert, wird der Gesamtpreis in einem Moment geändert. Wir müssen uns um nichts mehr Sorgen machen. Die Watch -Eigenschaft kümmert sich jetzt um diese Berechnung.

Schauen wir uns die Webseite an:

Und versuchen wir, die Menge zu erhöhen oder zu ändern und einige Ergebnisse zu sehen:

Wenn wir die Menge ändern, sagen wir "4", wäre der Gesamtpreis "800":

Wenn wir die Menge in „7“ ändern, wäre der Gesamtpreis „1400“:

So funktioniert die Watch -Immobilie und hilft bei der reaktiven Entwicklung. Reaktivität ist eine Art Signatur von Vue.JS. Außerdem ist die Watch -Immobilie nützlich, während sie asynchrone Operationen ausführen.

Abschluss

In diesem Artikel haben wir gelernt, was eine Uhreneigenschaft ist und wie wir sie in Vue verwenden können.JS. Wir haben auch ein Beispiel im wirklichen Leben ausprobiert, um seine wahre Implementierung zu verstehen. Dies hilft sehr, Zeit zu sparen und den Entwicklungsprozess zu beschleunigen. Wir hoffen, dass Sie diesen Artikel hilfreich gefunden haben und weiterhin LinuxHint besuchen.com für besseres Verständnis.