Phenquestions
Vue.js ist ein sehr leistungsfähiges und reaktives Javascript-Framework, das zum Erstellen von Uis (Benutzeroberflächen) und SPAs (Einzelseitenanwendungen) verwendet wird. Es wird durch die Kombination der besten Funktionen aus bereits vorhandenen Angular- und React-Frameworks erstellt. Entwickler lieben es auch, darin zu programmieren oder Anwendungen zu erstellen.
Vue.js bietet die watch-Eigenschaft, um die Variablen oder Datenänderungen zu beobachten und darauf zu reagieren. Wir können die Watch-Eigenschaft verwenden, um das DOM zu manipulieren, wenn die überwachte Variable geändert wird. In diesem Artikel werden wir uns ansehen, wie wir die Watch-Eigenschaft verwenden und die gewünschten Aufgaben bei der Änderung der Variablen ausführen können. Also lasst uns anfangen.
Beobachter
EIN Beobachter in Vue.js verhält sich wie ein Ereignis-Listener für eine Variable oder Eigenschaft. Es wird verwendet, um verschiedene Aufgaben bei der Änderung einer bestimmten Eigenschaft zu erfüllen. Es ist praktisch, wenn Sie asynchrone Aufgaben ausführen.
Lassen Sie uns das Konzept des Beobachters anhand eines Beispiels demonstrieren und verstehen.
Beispiel:
Angenommen, wir bauen eine E-Commerce-Website auf, auf der wir eine Liste von Artikeln haben, und bauen sie einen Warenkorb oder eine Checkout-Komponente auf. In dieser Komponente müssen wir die Menge eines einzelnen Elements in Bezug auf die Anzahl der Elemente berechnen.
Zuerst nehmen wir einige Eigenschaften in den Daten an.
Daten()Rückkehr
Artikelname: "Artikel 1",
itemQuantity: null,
Artikelpreis: 200,
Gesamtpreis: 0
,
In dem wir die Eigenschaft „itemQuantity“ beobachten und den Gesamtpreis berechnen. Wir werden zuerst die Datenbindungen in der Vorlage durchführen,
bevor Sie den Code schreiben, um die Variable zu beobachten und den Gesamtpreis zu berechnen.
Beobachter
Artikelname: itemName
Artikelpreis: itemPrice
Gesamtpreis: totalPrice
Nachdem wir diesen Code geschrieben haben, haben wir unsere Webseite wie folgt:
Jetzt möchten wir den Gesamtpreis bei der Änderung von „itemQuantity“ ändern, wie wenn der Benutzer die Menge über das Eingabefeld ändert. Der Gesamtpreis sollte geändert werden. Zu diesem Zweck müssen wir „itemQuantity“ beobachten und den Gesamtpreis berechnen, wenn die Eigenschaft „itemQuantity“ geändert wird.
Der Watcher für „itemQuantity“ wäre also wie folgt:
Uhr:Artikel Menge()
diese.Gesamtpreis = this.itemQuantity * this.Stückpreis;
Konsole.log (diese.Artikel Menge);
Wenn der Benutzer jetzt die "itemQuantity" ändert, wird der Gesamtpreis sofort geändert. Wir müssen uns um nichts mehr kümmern. Die Watch-Eigenschaft übernimmt diese Berechnung jetzt.
Schauen wir uns die Webseite an:
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 auf „7“ ändern, wäre der Gesamtpreis ähnlich „1400“:
So funktioniert die Uhreigenschaft und hilft bei der reaktiven Entwicklung. Reaktivität ist eine Art Signatur von Vue.js. Außerdem ist die Watch-Eigenschaft praktisch, wenn asynchrone Vorgänge ausgeführt werden.
Fazit
In diesem Artikel haben wir erfahren, was eine Watch-Eigenschaft ist und wie wir sie in Vue verwenden können.js. Wir haben auch ein reales Beispiel ausprobiert, um die wahre Umsetzung zu verstehen. Dies hilft viel Zeit zu sparen und den Entwicklungsprozess zu beschleunigen. Wir hoffen, dass Sie diesen Artikel hilfreich fanden und besuchen Sie weiterhin linuxhint.com zum besseren Verständnis.
