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 watcher, importer klokkefunksjonen fra vue-pakken i skriptet ditt:

 <script setup>
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 Name</button>
  </div>
</template>
<script setup>
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. Snippets malseksjon definerer komponentens HTML-struktur, som inkluderer ap-tagg som viser verdien til brukerens reaktive variabel.

Malen inneholder også et knappeelement, med en changeName-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>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ 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 å få summen av farens og sønnens alder. For å gjøre det, oppretter den en ny reaktiv variabel, total. Du kan opprette en reaktiv variabel når du bruker Vues Composition API.

Utdraget bruker deretter to klokkefunksjoner 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 den totale reaktive variabelen.

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

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ 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 kortfattet og lettere å lese. Snutten får summen av far og sønns alder og lagrer den i en beregnet ref (variabel), totalt. 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.

Det umiddelbare 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:

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

Det dype alternativet som er 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 sann, kan overvåkeren oppdage endringer i nestede egenskaper.

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

 <script setup>
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 datareferen med et objekt som inneholder en length-egenskap. Utdraget setter dypalternativet til sant. Den logger deretter på konsollen at data har endret seg siden lengdeegenskapen 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:

 <script setup>
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 til 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.