Lær om Vue.js Watchers for at forbedre din webapp-udvikling

Nøgle takeaways

• JavaScript-rammer som Vue tilbyder funktioner såsom komponentarkitektur, tilstandsstyring og routing for at forenkle udvikling af webapps.
• Vue-watchers er funktioner, der overvåger ændringer i reaktive egenskaber og giver dig mulighed for at reagere på hændelser og dataændringer.
• Sammenligner man overvågere med beregnede egenskaber, er beregnede egenskaber mere kortfattede og lettere at læse, hvilket resulterer i bedre ydeevne og fejlretning.

JavaScript-rammer er blevet en vital del af webudvikling. Dette skyldes deres let tilgængelige funktioner, herunder komponentarkitektur, tilstandsstyring og routing. Disse hjælper med at reducere den stress, indsats og tid, der er nødvendig for at bygge en webapp fra bunden.

Vue, en af ​​disse rammer, tilbyder mange funktioner til at fremskynde udviklingen. Watch-funktionen lader dig overvåge værdierne af variabler og udtryk under programafvikling.

Hvad er iagttagere i Vue?

Vue watchers er funktioner, der overvåger ændringer i en reaktiv egenskab og reagerer derefter. Watchers lader dig reagere på begivenheder og dataændringer.

For at bruge en overvåger skal du importere holde øje funktion fra vue pakke i dit script:

<scriptsetup>
import { watch } from 'vue';
script>

Du kan nu bruge urfunktionen til at implementere en watcher i din Vue-komponent. Her er et simpelt eksempel:

<template>
<div>
<p>{{ user }}p>
<button @click="changeName">Change Namebutton>
div>
template>
<scriptsetup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
 user.value = 'Victor'; // Change the user's name
};
watch(user, (newUser, oldUser) => {
 alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
script>

Denne enkle komponent bruger urfunktionen til at overvåge ændringen i en brugers navn. Uddragets skabelonsektion definerer komponentens HTML-struktur, som inkluderer en s tag, der viser værdien af ​​den brugerreaktive variabel.

Skabelonen indeholder også et knapelement med en ændre navn fungere knyttet til en klikhændelseslytter. Når brugervariablen ændres, udløser Vue tilbagekaldsfunktionen. Tilbagekaldsfunktionen viser en advarsel: "Brugernavn ændret fra "Chinedu" til "Victor".

Sammenligning af overvågere med beregnede egenskaber

Det er vigtigt at forstå forskellen mellem overvågere og beregnede egenskaber. Selvom de begge bruges som reaktivitetsværktøjer i Vue, bør du bruge dem til forskellige formål.

For eksempel kan du beregne summen af ​​en far og søns alder med iagttagere, sådan her:

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
import { ref, watch } from 'vue';
const father = ref();
const son = ref();
const total = ref();
watch(son, (newAge, oldAge) => {
 total.value = Number(father.value) + Number(newAge)
})
watch(father, (newAge, oldAge) => {
 total.value = Number(newAge) + Number(son.value)
})
script>

Denne Vue-komponent bruger iagttagere til at få summen af ​​faderens og sønnens alder. For at gøre det opretter den en ny reaktiv variabel, Total. Du kan oprette en reaktiv variabel, når du bruger Vue's Composition API.

Uddraget beskæftiger så to holde øje funktioner til at se sønnens og farens alder. For hver alder, enten far eller søn, opsummerer uddraget den nye værdi med den andens alder. Det gemmer derefter resultatet til Total reaktiv variabel.

Overvej det samme scenarie i ovenstående uddrag til et, der bruger beregnede egenskaber:

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
import { ref, computed } from 'vue';
const father = ref();
const son = ref();
const total = computed(() => {
 return Number(father.value) + Number(son.value);
});
script>

Dette uddrag er sammenlignet med førstnævnte mere kortfattet og lettere at læse. Uddraget får summen af ​​far og søns alder og gemmer det i en beregnet ref (variabel), Total. Skabelonafsnittet viser derefter den samlede variabel vha interpolation, en databindingsteknik i Vue.

Selvom du kan få summen af ​​de to aldre med overvågere, er det bedre at gøre det med beregnede egenskaber. Brug af overvågere i denne situation kan føre til langsommere indlæsningstider og sværere fejlfinding, blot fordi det involverer mere kode.

Brug ikke overvågere som erstatning for beregnede egenskaber. Brug overvågere til at overvåge og reagere på dataændringer og beregnede egenskaber, når du vil udlede nye data fra eksisterende reaktive data.

Det umiddelbar option er en konfiguration, du kan bruge, når du opretter en overvåger. Denne mulighed bestemmer, om observatøren skal udløse sit tilbagekald umiddelbart efter Vue har monteret komponenten.

Her er et eksempel på en komponent, der bruger en watcher med den umiddelbare mulighed:

<scriptsetup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
 count,
 (newCount, oldCount) => {
 console.log(`Count changed from ${oldCount} to ${newCount}`);
 },
 { immediate: true }
);
script>

I uddraget ovenfor udfører observatøren sit tilbagekald straks efter komponentinitialisering og logger "Antal ændret fra udefineret til 10" til konsollen. Dette viser, at den oprindelige variabel var udefineret, før Vue injicerede værdien 10 til tælleref.

Den øjeblikkelige mulighed kan være praktisk i scenarier, hvor du ønsker at udføre en indledende handling eller initialisering baseret på den aktuelle værdi af den overvågede egenskab. For eksempel, når du har brug for din app til at hente data fra en API, når Vue monterer en komponent.

Den dybe mulighed tilgængelig i Vue Watchers

Det dyb mulighed, der er tilgængelig, når du arbejder med overvågere i Vue, muliggør dyb observation af ændringer i indlejrede objekter eller arrays. Når indstillet til rigtigt, kan overvågeren registrere ændringer i indlejrede egenskaber.

Her er et eksempel på en Vue-komponent med den dybe mulighed:

<scriptsetup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 },
 { deep: true }
);
// This will trigger the watcher because it's a deep change
data.value.length = 43;
script>

Uddraget ovenfor initialiserer data ref med et objekt, der indeholder en længde ejendom. Uddraget indstiller den dybe indstilling til rigtigt. Det logger derefter på konsollen, at data er ændret, siden egenskaben længde er ændret til 43.

Uden den dybe indstilling sat til sand, vil urfunktionen ikke bemærke nogen ændringer på objektet. Vue sporer dog alle indlejrede og dybe ændringer uden den dybe indstilling, når du initialiserer datavariablen som et reaktivt objekt:

<scriptsetup>
import { ref, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 }
);
// This will trigger the watcher because it changes a reactive object
data.length = 43;
script>

Watch-funktionen i ovenstående kodestykke vil logge på konsollen, at dataene er ændret, fordi datavariablen er et reaktivt objekt.

Byg bedre apps med Vue Watchers

Vues iagttagere kan hjælpe dig med at opnå finkornet reaktivitet i dine applikationer. De styrer, hvordan du kan observere ændringer i dataegenskaber og køre tilpasset logik som svar.

At forstå, hvornår du skal bruge overvågere, deres forskelle fra beregnede egenskaber og muligheder som øjeblikkelig og dyb kan forbedre din evne til at bygge meget responsive Vue-applikationer markant.