Vue.js Watch Property

Vue.js är ett mycket kraftfullt och reaktivt Javascript-ramverk som används för att bygga Uis (User Interfaces) och SPAs (Single-page Applications). Den är byggd genom att kombinera de bästa funktionerna från redan befintliga ramar för Angular och reagera. Utvecklare älskar också att koda eller bygga applikationer i den.

Vue.js tillhandahåller klockegenskapen för att observera och reagera på variablerna eller dataändringen. Vi kan använda egenskapen watch för att manipulera DOM när den bevakade variabeln ändras. I den här artikeln ska vi ta en titt på hur vi kan använda klockegenskapen och utföra de önskade uppgifterna vid ändring av variabel. Så, låt oss komma igång.

Tittare

A bevakare i Vue.js fungerar som en händelselyssnare till en variabel eller egendom. Den används för att utföra flera uppgifter om ändring av någon specifik egendom. Det kommer till nytta när du gör asynkrona uppgifter.

Låt oss demonstrera och förstå begreppet tittaren genom att överväga ett exempel.

Exempel:

Anta att vi bygger en e-handelswebbplats, där vi har en lista med artiklar, och vi bygger den vagn eller kassakomponent. I den komponenten måste vi beräkna mängden av ett enda element angående antalet artiklar.

För det första antar vi några egenskaper i data.

data ()
lämna tillbaka
artikelnamn: "Artikel 1",
itemQuantity: null,
artikelPris: 200,
totaltPris: 0

,

I vilken vi kommer att titta på egenskapen "itemQuantity" och beräkna det totala priset. Vi gör först databindningarna i mallen,

innan du skriver koden för att titta på variabeln och beräkna totalpriset.

Efter att ha skrivit den här koden kommer vi att ha vår hemsida så här:

Nu vill vi ändra det totala priset på ändringen av "itemQuantity" som när användaren ändrar kvantiteten med inmatningsfältet. Det totala priset bör ändras. För det ändamålet måste vi titta på "itemQuantity" och beräkna det totala priset när egenskapen "itemQuantity" ändras.

Så tittaren för "itemQuantity" skulle vara så här:

Kolla på:
itemQuantity ()
detta.totalpris = detta.artikelMängd * detta.varupris;
trösta.logg (detta.itemQuantity);

Nu, närhelst användaren ändrar “itemQuantity”, ändras det totala priset på ett ögonblick. Vi behöver inte oroa oss för någonting längre. Klockfastigheten tar hand om denna beräkning nu.

Låt oss ta en titt på webbsidan:

Och låt oss försöka öka eller ändra kvantiteten och se några resultat:

Om vi ​​ändrar kvantiteten, låt oss säga "4", skulle det totala priset vara "800":

På samma sätt, om vi ändrar kvantiteten till "7", skulle det totala priset vara "1400":

Så det här är hur klockfastigheten fungerar och hjälper till med reaktiv utveckling. Reaktivitet är typ av Vue.js. Klockegenskapen kommer också till nytta när du utför asynkrona operationer.

Slutsats

I den här artikeln har vi lärt oss vad som är en klockfastighet och hur vi kan använda den i Vue.js. Vi har också försökt ett verkligt exempel för att förstå dess verkliga implementering. Detta hjälper mycket att spara tid och påskynda utvecklingsprocessen. Vi hoppas att du tyckte att den här artikeln var till hjälp och fortsätter att besöka linuxhint.com för bättre förståelse.