Leer meer over Vue.js Watchers om de ontwikkeling van uw webapp te verbeteren

Belangrijkste leerpunten

• JavaScript-frameworks zoals Vue bieden functies zoals componentarchitectuur, statusbeheer en routing om de ontwikkeling van webapps te vereenvoudigen.
• Vue-watchers zijn functies die veranderingen in reactieve eigenschappen monitoren en u in staat stellen te reageren op gebeurtenissen en gegevenswijzigingen.
• Als we watchers vergelijken met berekende eigenschappen, zijn de berekende eigenschappen beknopter en gemakkelijker te lezen, wat resulteert in betere prestaties en foutopsporing.

JavaScript-frameworks zijn een essentieel onderdeel geworden van webontwikkeling. Dit komt door hun gemakkelijk toegankelijke functies, waaronder componentarchitectuur, statusbeheer en routering. Deze helpen de stress, moeite en tijd te verminderen die nodig is om een ​​web-app helemaal opnieuw te bouwen.

Vue, een van deze raamwerken, biedt veel functies om de ontwikkeling te versnellen. Met de watch-functie kunt u de waarden van variabelen en uitdrukkingen controleren tijdens de uitvoering van het programma.

Wat zijn kijkers in Vue?

Vue-watchers zijn functies die veranderingen in een reactieve eigenschap monitoren en dienovereenkomstig reageren. Met Watchers kunt u reageren op gebeurtenissen en gegevenswijzigingen.

Als u een watcher wilt gebruiken, importeert u het horloge functie uit de kijk verpak in uw script:

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

U kunt nu de watch-functie gebruiken om een ​​watcher in uw Vue-component te implementeren. Hier is een eenvoudig voorbeeld:

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

Dit eenvoudige onderdeel gebruikt de watch-functie om de wijziging in de naam van een gebruiker te monitoren. De sjabloonsectie van het fragment definieert de HTML-structuur van de component, die a P tag die de waarde van de reactieve variabele van de gebruiker weergeeft.

De sjabloon bevat ook een knopelement, met een naam veranderen functie gekoppeld aan een klikgebeurtenislistener. Wanneer de gebruikersvariabele verandert, activeert Vue de callback-functie. De terugbelfunctie geeft een waarschuwing weer: “Gebruikersnaam gewijzigd van "Chinedu" in "Victor".”

Watchers vergelijken met berekende eigenschappen

Het is belangrijk om het verschil te begrijpen tussen watchers en berekende eigenschappen. Hoewel ze beide worden gebruikt als reactiviteitstools in Vue, moet je ze voor verschillende doeleinden gebruiken.

U kunt bijvoorbeeld de som van de leeftijd van een vader en zoon met kijkers als volgt berekenen:

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

Deze Vue-component maakt gebruik van watchers om de som van de leeftijden van vader en zoon te bepalen. Om dit te doen, creëert het een nieuwe reactieve variabele, totaal. U kunt een reactieve variabele wanneer u de Composition API van Vue gebruikt.

Het fragment gebruikt er dan twee horloge functies om de leeftijden van de zoon en vader te bekijken. Voor elke leeftijd, vader of zoon, somt het fragment de nieuwe waarde op met de leeftijd van de andere leeftijd. Het resultaat wordt vervolgens opgeslagen in de totaal reactieve variabele.

Beschouw hetzelfde scenario in het bovenstaande fragment als een scenario waarin berekende eigenschappen worden gebruikt:

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

Dit fragment is, vergeleken met het vorige, beknopter en gemakkelijker te lezen. Het fragment haalt de som van de leeftijd van vader en zoon op en slaat deze op in een berekende ref (variabele), totaal. In het sjabloongedeelte wordt vervolgens de totale variabele weergegeven met behulp van interpolatie, een databindingstechniek in Vue.

Zelfs als je met watchers het totaal van de twee leeftijden kunt achterhalen, is het beter om dit te doen met berekende eigenschappen. Het gebruik van watchers in deze situatie kan leiden tot langzamere laadtijden en moeilijker debuggen, simpelweg omdat er meer code voor nodig is.

Gebruik geen watchers als vervanging voor berekende eigenschappen. Gebruik watchers om gegevenswijzigingen te controleren en hierop te reageren, en berekende eigenschappen wanneer u nieuwe gegevens wilt afleiden uit bestaande reactieve gegevens.

De onmiddellijk optie is een configuratie die u kunt gebruiken bij het maken van een watcher. Deze optie bepaalt of de watcher zijn callback onmiddellijk moet activeren nadat Vue de component heeft aangekoppeld.

Hier is een voorbeeld van een component die een watcher gebruikt met de directe optie:

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

In het bovenstaande fragment voert de watcher de callback onmiddellijk uit na de initialisatie van de component en registreert hij “Aantal gewijzigd van ongedefinieerd naar 10” in de console. Dit toont aan dat de initiële variabele ongedefinieerd was voordat Vue de waarde 10 in de telreferentie injecteerde.

De directe optie kan handig zijn in scenario's waarin u een eerste actie of initialisatie wilt uitvoeren op basis van de huidige waarde van de bewaakte eigenschap. Bijvoorbeeld wanneer u uw app nodig heeft om gegevens van een API op te halen zodra Vue een component heeft aangekoppeld.

De diepe optie beschikbaar in Vue Watchers

De diep De optie die beschikbaar is bij het werken met watchers in Vue maakt diepgaande observatie van veranderingen binnen geneste objecten of arrays mogelijk. Wanneer ingesteld op WAAR, kan de watcher wijzigingen binnen geneste eigenschappen detecteren.

Hier is een voorbeeld van een Vue-component met de diepe optie:

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

Het bovenstaande fragment initialiseert het gegevens ref met een object dat a bevat lengte eigendom. Het fragment stelt de diepe optie in op WAAR. Vervolgens wordt bij de console geregistreerd dat de gegevens zijn gewijzigd sinds de eigenschap length is gewijzigd 43.

Als de deep-optie niet op true is ingesteld, merkt de watch-functie geen wijzigingen aan het object op. Vue volgt echter alle geneste en diepgaande veranderingen zonder de diepe optie wanneer u de gegevensvariabele initialiseert als een reactief object:

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

De watch-functie in het bovenstaande fragment logt in de console dat de gegevens zijn gewijzigd, omdat de gegevensvariabele een reactief object is.

Bouw betere apps met Vue Watchers

De watchers van Vue kunnen u helpen een fijnmazige reactiviteit in uw toepassingen te bereiken. Ze bepalen hoe u wijzigingen in gegevenseigenschappen kunt waarnemen en als reactie daarop aangepaste logica kunt uitvoeren.

Als u begrijpt wanneer u watchers moet gebruiken, wat hun verschillen zijn met berekende eigenschappen en opties zoals direct en diep, kunt u uw vermogen om zeer responsieve Vue-applicaties te bouwen aanzienlijk vergroten.