Vue.JS Watch Property

Vue.JS è un framework JavaScript molto potente e reattivo, che viene utilizzato per creare UI (interfacce utente) e SPAS (applicazioni a pagina singola). È costruito combinando le migliori caratteristiche di framework angolari e react già esistenti. Gli sviluppatori adorano anche codificare o creare applicazioni in esso.

Vue.JS fornisce la proprietà dell'orologio per osservare e reagire alle variabili o alla modifica dei dati. Possiamo usare la proprietà dell'orologio per manipolare il DOM quando la variabile osservata viene cambiata. In questo articolo, daremo un'occhiata a come possiamo usare la proprietà di orologi ed eseguire le attività desiderate sul cambio di variabile. Quindi iniziamo.

Osservatori

UN Osservatore in vue.JS si comporta come un ascoltatore di eventi a una variabile o proprietà. Viene utilizzato per svolgere diversi compiti sul cambio di una proprietà specifica. È utile mentre svolgono compiti asincroni.

Dimostriamo e comprendiamo il concetto di osservatore considerando un esempio.

Esempio:

Supponiamo che stiamo costruendo un sito Web di e-commerce, in cui abbiamo un elenco di articoli, e stiamo costruendo il carrello o il componente. In questo componente, dobbiamo calcolare la quantità di un singolo elemento relativo al numero di elementi.

Innanzitutto, stiamo assumendo alcune proprietà nei dati.

dati()
ritorno
NomeName: "Item 1",
Itemquantity: null,
ItemPrice: 200,
TotalPrice: 0

,

In cui guarderemo la proprietà "itemquantity" e calcoleremo il prezzo totale. Prima faremo i legami dati nel modello,

Prima di scrivere il codice per guardare la variabile e calcolare il prezzo totale.

Dopo aver scritto questo codice, avremo la nostra pagina web come questa:

Ora, vogliamo modificare il prezzo totale sulla variazione di "Itemquantity" come ogni volta che l'utente cambia la quantità utilizzando il campo di input. Il prezzo totale dovrebbe essere cambiato. A tale scopo, dovremo guardare "itemquantity" e calcolare il prezzo totale ogni volta che la proprietà "itemquantity" viene cambiata.

Quindi, l'osservatore per "itemquantity" sarebbe così:

orologio:
itemQuantity ()
Questo.TotalPrice = this.itemquantity * questo.prezzo dell'articolo;
console.registro (questo.itemquantity);

Ora, ogni volta che l'utente cambia "itemquantity", il prezzo totale verrà modificato in un momento. Non dobbiamo più preoccuparci di nulla,. La proprietà dell'orologio si occuperà ora di questo calcolo.

Diamo un'occhiata alla pagina web:

E, proviamo ad aumentare o cambiare la quantità e vedere alcuni risultati:

Se cambiamo la quantità, diciamo "4", il prezzo totale sarebbe "800":

Allo stesso modo, se cambiamo la quantità in "7", il prezzo totale sarebbe "1400":

Quindi, è così che funziona la proprietà dell'orologio e aiuta nello sviluppo reattivo. La reattività è una specie di firma di Vue.js. Inoltre, la proprietà dell'orologio è utile mentre si esegue operazioni asincroni.

Conclusione

In questo articolo, abbiamo imparato cosa è una proprietà di orologi e come possiamo usarla in vue.js. Abbiamo anche provato un esempio di vita reale per comprenderne la vera implementazione. Questo aiuta molto a risparmiare tempo e ad accelerare il processo di sviluppo. Speriamo che tu abbia trovato questo articolo utile e continui a visitare Linuxhint.com per una migliore comprensione.