Lær om Vue.js Watchers for å forbedre utviklingen av webapper

Viktige takeaways

• JavaScript-rammeverk som Vue tilbyr funksjoner som komponentarkitektur, tilstandsadministrasjon og ruting for å forenkle utvikling av nettapper.
• Vue-overvåkere er funksjoner som overvåker endringer i reaktive egenskaper og lar deg reagere på hendelser og dataendringer.
• Sammenligning av overvåkere med beregnede egenskaper, er beregnede egenskaper mer konsise og lettere å lese, noe som resulterer i bedre ytelse og feilsøking.

JavaScript-rammeverk har blitt en viktig del av webutvikling. Dette er på grunn av deres lett tilgjengelige funksjoner, inkludert komponentarkitektur, tilstandsadministrasjon og ruting. Disse bidrar til å redusere stresset, innsatsen og tiden som trengs for å bygge en nettapp fra bunnen av.

Vue, et av disse rammeverkene, tilbyr mange funksjoner for å fremskynde utviklingen. Watch-funksjonen lar deg overvåke verdiene til variabler og uttrykk under programkjøring.

Hva er overvåkere i Vue?

Vue-overvåkere er funksjoner som overvåker endringer i en reaktiv egenskap og reagerer deretter. Watchers lar deg reagere på hendelser og dataendringer.

For å bruke en overvåker, importer se funksjon fra vue pakke i skriptet ditt:

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

Du kan nå bruke klokkefunksjonen til å implementere en overvåker i Vue-komponenten din. Her er et enkelt 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 komponenten bruker klokkefunksjonen til å overvåke endringen i en brukers navn. Snuttets malseksjon definerer komponentens HTML-struktur, som inkluderer en s taggen som viser verdien til den brukerreaktive variabelen.

Malen inneholder også et knappeelement, med en endre navn funksjon knyttet til en klikkhendelseslytter. Når brukervariabelen endres, utløser Vue tilbakeringingsfunksjonen. Tilbakeringingsfunksjonen viser et varsel: "Brukernavn endret fra "Chinedu" til "Victor".

Sammenligning av overvåkere med beregnede egenskaper

Det er viktig å forstå forskjellen mellom overvåkere og beregnede egenskaper. Selv om de begge brukes som reaktivitetsverktøy i Vue, bør du bruke dem til forskjellige formål.

For eksempel kan du beregne summen av en far og sønns alder med overvåkere, slik:

<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-komponenten bruker overvåkere for å få summen av farens og sønnens alder. For å gjøre det, oppretter den en ny reaktiv variabel, Total. Du kan lage en reaktiv variabel når du bruker Vues Composition API.

Utdraget bruker da to se funksjoner for å se sønnens og farens alder. For hver alder, enten far eller sønn, oppsummerer utdraget den nye verdien med den andres alder. Den lagrer deretter resultatet til Total reaktiv variabel.

Tenk på det samme scenariet i kodebiten ovenfor som en som bruker beregnede egenskaper:

<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 utdraget, sammenlignet med det tidligere, er mer kortfattet og lettere å lese. Snutten får summen av faren og sønnens alder og lagrer den i en beregnet ref (variabel), Total. Maldelen viser deretter den totale variabelen ved hjelp av interpolasjon, en databindingsteknikk i Vue.

Selv om du kan få summen av de to aldre med overvåkere, er det bedre å gjøre det med beregnede egenskaper. Bruk av overvåkere i denne situasjonen kan føre til langsommere lastetider og vanskeligere feilsøking rett og slett fordi det involverer mer kode.

Ikke bruk overvåkere som erstatning for beregnede egenskaper. Bruk overvåkere til å overvåke og reagere på dataendringer, og beregnede egenskaper når du ønsker å utlede nye data fra eksisterende reaktive data.

De umiddelbar alternativet er en konfigurasjon du kan bruke når du oppretter en overvåker. Dette alternativet bestemmer om overvåkeren skal utløse sin tilbakeringing umiddelbart etter at Vue har montert komponenten.

Her er et eksempel på en komponent som bruker en overvåker med det umiddelbare alternativet:

<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 utdraget ovenfor vil overvåkeren utføre tilbakeringingen umiddelbart etter komponentinitialisering og logge "Antallet endret fra udefinert til 10" til konsollen. Dette viser at den opprinnelige variabelen var udefinert før Vue injiserte verdien på 10 til count ref.

Det umiddelbare alternativet kan være nyttig i scenarier der du ønsker å utføre en innledende handling eller initialisering basert på gjeldende verdi av den overvåkede egenskapen. For eksempel når du trenger appen din for å hente data fra et API når Vue monterer en komponent.

Det dype alternativet tilgjengelig i Vue Watchers

De dyp alternativet tilgjengelig når du arbeider med overvåkere i Vue muliggjør dyp observasjon av endringer i nestede objekter eller matriser. Når satt til ekte, kan overvåkeren oppdage endringer i nestede egenskaper.

Her er et eksempel på en Vue-komponent med dypalternativet:

<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>

Utdraget ovenfor initialiserer data ref med et objekt som inneholder en lengde eiendom. Utdraget setter dypalternativet til ekte. Den logger deretter på konsollen at data har endret seg siden egenskapen lengde er endret til 43.

Uten dypalternativet satt til sann, vil ikke klokkefunksjonen merke noen endringer på objektet. Imidlertid sporer Vue alle nestede og dype endringer uten dypalternativet når du initialiserer datavariabelen 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>

Klokkefunksjonen i kodebiten ovenfor vil logge på konsollen at dataene er endret fordi datavariabelen er et reaktivt objekt.

Bygg bedre apper med Vue Watchers

Vues overvåkere kan hjelpe deg med å oppnå finkornet reaktivitet i applikasjonene dine. De kontrollerer 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 umiddelbar og dyp kan forbedre din evne til å bygge svært responsive Vue-applikasjoner betydelig.