Hovedpoenger
- JavaScript-rammeverk, som Vue, tilbyr funksjoner som komponentbasert arkitektur, tilstandsstyring og ruting for å forenkle utviklingen av webapplikasjoner.
- Vue-overvåkere er funksjoner som følger med på endringer i reaktive egenskaper og gir deg muligheten til å reagere på hendelser og endringer i data.
- Når man sammenligner overvåkere med beregnede egenskaper, er beregnede egenskaper ofte mer konsise og enklere å forstå, noe som resulterer i bedre ytelse og enklere feilsøking.
JavaScript-rammeverk har blitt en sentral del av webutvikling. Dette skyldes i stor grad de lett tilgjengelige funksjonene, som inkluderer komponentarkitektur, tilstandsstyring og ruting. Disse bidrar til å redusere stress, innsats og tid som kreves for å bygge en webapplikasjon fra grunnen av.
Vue, som er et slikt rammeverk, tilbyr mange funksjoner for å effektivisere utviklingen. Overvåkingsfunksjonen (watch-funksjonen) lar deg følge med på verdiene til variabler og uttrykk under kjøring av programmet.
Hva er overvåkere i Vue?
Vue-overvåkere er metoder som monitorerer endringer i en reaktiv egenskap og deretter reagerer på disse endringene. Overvåkere gir deg mulighet til å svare på hendelser og dataendringer.
For å benytte deg av en overvåker, importer watch-funksjonen fra Vue-pakken i skriptet ditt:
<script setup>
import { watch } from 'vue';
</script>
Du kan nå bruke watch-funksjonen til å implementere en overvåker i din Vue-komponent. Her er et enkelt eksempel:
<template>
<div>
<p>{{ user }}</p>
<button @click="changeName">Endre navn</button>
</div>
</template><script setup>
import { ref, watch } from 'vue';const user = ref('Chinedu');
const changeName = () => {
user.value="Victor"; // Endrer brukerens navn
};watch(user, (newUser, oldUser) => {
alert(`Brukernavn endret fra "${oldUser}" til "${newUser}"`);
});
</script>
Denne grunnleggende komponenten benytter watch-funksjonen for å overvåke endringen i en brukers navn. Snippet i template-seksjonen definerer komponentens HTML-struktur, som inkluderer en p-tag som viser verdien av brukerens reaktive variabel.
Template inkluderer også en button, med en changeName-funksjon koblet til en klikk-hendelseslytter. Når bruker-variabelen endres, utløser Vue en callback-funksjon. Denne callback-funksjonen viser en alert: «Brukernavn endret fra «Chinedu» til «Victor’».
Sammenligning av overvåkere med beregnede egenskaper
Det er viktig å forstå skillet mellom overvåkere og beregnede egenskaper. Selv om begge brukes som reaktivitetsverktøy i Vue, bør de brukes til forskjellige formål.
For eksempel kan du beregne summen av en fars og sønns alder ved hjelp av overvåkere, slik:
<template>
<input type="text" placeholder="Fars alder" v-model="father">
<input type="text" placeholder="Sønns alder" v-model="son">
<p>Total alder: {{ total }}</p>
</template><script setup>
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-komponenten bruker overvåkere for å finne den totale alderen til far og sønn. For å oppnå dette, oppretter den en ny reaktiv variabel, total. En reaktiv variabel kan opprettes ved bruk av Vues Composition API.
Koden bruker deretter to watch-funksjoner for å observere henholdsvis sønnens og farens alder. For hver alder, enten det er far eller sønn, summerer koden den nye verdien med den andres alder. Deretter lagres resultatet i den totale reaktive variabelen.
La oss se på det samme scenariet som benytter beregnede egenskaper:
<template>
<input type="text" placeholder="Fars alder" v-model="father">
<input type="text" placeholder="Sønns alder" v-model="son">
<p>Total alder: {{ total }}</p>
</template><script setup>
import { ref , computed } from 'vue';const father = ref();
const son = ref();const total = computed(() => {
return Number(father.value) + Number(son.value);
});</script>
Dette utdraget, sammenlignet med det tidligere, er mer konsist og enklere å forstå. Koden summerer farens og sønnens alder og lagrer summen i en beregnet ref (variabel), total. Template-delen viser deretter den totale variabelen ved hjelp av interpolasjon, en databindingsteknikk i Vue.
Selv om du kan oppnå summen av de to aldre ved hjelp av overvåkere, er det mer hensiktsmessig å gjøre dette ved hjelp av beregnede egenskaper. Å bruke overvåkere i denne situasjonen kan føre til langsommere lastetider og vanskeligere feilsøking, rett og slett fordi det involverer mer kode.
Unngå å bruke overvåkere som en erstatning for beregnede egenskaper. Overvåkere brukes for å observere og reagere på dataendringer, mens beregnede egenskaper benyttes når du skal utlede ny data fra eksisterende reaktive data.
Det umiddelbare alternativet er en innstilling du kan bruke når du definerer en overvåker. Dette alternativet bestemmer om overvåkerens tilbakeringingsfunksjon skal utløses umiddelbart etter at Vue har montert komponenten.
Her er et eksempel på en komponent som bruker en overvåker med det umiddelbare alternativet:
<script setup>
import { ref, watch } from 'vue';const count = ref(10);
watch(
count,
(newCount, oldCount) => {
console.log(`Antall endret fra ${oldCount} til ${newCount}`);
},
{ immediate: true }
);
</script>
I utdraget over vil overvåkeren utføre sin tilbakeringingsfunksjon umiddelbart etter at komponenten initialiseres, og logge «Antall endret fra udefinert til 10» til konsollen. Dette illustrerer at den opprinnelige variabelen var udefinert før Vue injiserte verdien 10 i count ref.
Det umiddelbare alternativet kan være nyttig i situasjoner der du ønsker å utføre en innledende handling eller initialisering basert på den aktuelle verdien av den observerte egenskapen. For eksempel når du trenger at appen henter data fra et API når Vue monterer en komponent.
Det dype alternativet i Vue-overvåkere
Det dype alternativet som er tilgjengelig når du jobber med overvåkere i Vue, gjør det mulig å observere endringer i nestede objekter eller arrays. Når den er satt til sann, kan overvåkeren oppdage endringer i nestede egenskaper.
Her er et eksempel på en Vue-komponent som bruker det dype alternativet:
<script setup>
import { ref, watch } from 'vue';const data = ref({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data endret`);
},
{ deep: true }
);// Dette vil utløse overvåkeren fordi det er en dyp endring
data.value.length = 43;
</script>
Koden over initialiserer datareferansen med et objekt som inneholder en length-egenskap. Det dype alternativet settes til sant. Konsollen vil deretter logge at data har endret seg siden length-egenskapen endres til 43.
Uten at det dype alternativet settes til sant, vil watch-funksjonen ikke registrere noen endringer i objektet. Imidlertid vil Vue spore alle nestede og dype endringer uten det dype alternativet når du initialiserer datavariabelen som et reaktivt objekt:
<script setup>
import { ref, watch } from 'vue';const data = reactive({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data endret`);
}
);// Dette vil utløse overvåkeren fordi den endrer et reaktivt objekt
data.length = 43;
</script>
Watch-funksjonen i koden over vil logge at dataene er endret, fordi datavariabelen er et reaktivt objekt.
Bygg bedre apper med Vue-overvåkere
Vues overvåkere kan hjelpe deg med å oppnå detaljert reaktivitet i applikasjonene dine. De lar deg kontrollere hvordan du kan observere endringer i dataegenskaper og kjøre tilpasset logikk som svar.
Å forstå når du skal bruke overvåkere, deres forskjeller fra beregnede egenskaper og alternativer som immediate og deep, kan forbedre din evne til å bygge responsive Vue-applikasjoner betydelig.