Leer meer over Vue.js Watchers om je webappontwikkeling te verbeteren

Belangrijkste punten

Vue is een populair JavaScript-framework dat ontwikkelaars verschillende belangrijke voordelen biedt bij het bouwen van webapplicaties. Dit zijn onder andere de ondersteuning voor componentgebaseerde architectuur, die modulaire en herbruikbare code mogelijk maakt; het robuuste state management systeem, dat helpt om consistentie te behouden tussen verschillende delen van een applicatie; en de ingebouwde routingmogelijkheden, die naadloze navigatie tussen verschillende pagina’s of weergaven binnen dezelfde website mogelijk maken. Door gebruik te maken van deze functies kunnen ontwikkelaars hun workflows stroomlijnen en efficiëntere, schaalbare webapps maken met Vue.

Vue watchers dienen als observers van reactieve eigenschappen, waardoor veranderingen kunnen worden gedetecteerd en reacties op gebeurtenissen of wijzigingen in gegevens mogelijk zijn.

Het gebruik van computed properties biedt een beknopter en leesbaarder alternatief in vergelijking met het gebruik van watchers voor het bereiken van vergelijkbare functionaliteit, wat uiteindelijk leidt tot een verbeterde uitvoeringssnelheid en gestroomlijnde debuggingprocessen.

JavaScript-frameworks hebben zich ontwikkeld tot een onmisbaar element op het gebied van webontwikkeling, dankzij hun gebruiksvriendelijke eigenschappen zoals modulair ontwerp, statusbehoud en navigatiebeheer. Bijgevolg dragen deze integrale componenten aanzienlijk bij aan het verlichten van de last, de kosten en de duur die nodig zijn voor het bouwen van een webapplicatie de novo.

Vue biedt een reeks functies die een snelle applicatieontwikkeling mogelijk maken. Een van die functies is de Watch-functie, waarmee ontwikkelaars veranderingen in variabele en expressiewaarden kunnen volgen tijdens runtime-bewerkingen.

Wat zijn Watchers in Vue?

Vue watchers zijn functies die wijzigingen in een reactieve eigenschap observeren en vervolgens een passende reactie geven op basis van dergelijke wijzigingen. Deze watchers stellen gebruikers in staat om te reageren op voorvallen en aanpassingen van gegevens en bieden een middel voor aandachtige bewaking binnen de applicatie.

Om een watcher in je Vue-project te gebruiken, moet je eerst de “watch”-functie uit het Vue-pakket importeren en in je script opnemen.

 <script setup>
import { watch } from 'vue';
</script>

Door gebruik te maken van de meegeleverde watch functie, kan iemand effectief een “watcher” in zijn Vue component opnemen. Een rudimentaire illustratie is als volgt:

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

Dit specifieke element gebruikt de Watcher-functionaliteit om wijzigingen in de identiteit van een gebruiker bij te houden. Het markupgebied van het codeblok stelt het HTML-framework van het component vast, dat bestaat uit een paragraafelement dat de waarde van de reactant met de naam “gebruiker” weergeeft.

De sjabloon bevat een knopcomponent die is gekoppeld aan een click event listener en een changeName functie. Bij wijziging van de gebruikersinvoer roept Vue de aangewezen callback-functie aan die vervolgens een pop-upbericht presenteert waarin staat dat de “gebruikersnaam is bijgewerkt van ‘Chinedu’ naar ‘Victor’.

Watchers vergelijken met computed properties

Het is cruciaal om het verschil tussen watchers en computed properties te begrijpen wanneer je ze gebruikt als reactieve mechanismen binnen het Vue framework. Hoewel beide vergelijkbare functies hebben in termen van het bijwerken van gegevensbindingen op basis van wijzigingen, is het essentieel om ze beide te gebruiken voor hun specifieke beoogde doel.

Een illustratie van dit concept kan worden gevonden in de berekening van de gecombineerde leeftijd van een vader en zoon met behulp van een zonnewijzer, als volgt:

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

Het gegeven Vue component gebruikt watchers om het totaal van de leeftijden van de vader en de zoon te verkrijgen door middel van het creëren van een nieuwe reactieve variabele bekend als “total”. Dit proces wordt uitgevoerd met behulp van de Composition API van Vue.

De code gebruikt twee bewakingsfuncties om de leeftijden van zowel de vader als de zoon in de gaten te houden. Door de som van deze leeftijden te berekenen en de waarde van de leeftijd van de ene persoon bij te werken met die van de andere, wordt een eindtotaal verkregen voor de gecombineerde leeftijden. Dit resultaat wordt vervolgens opgeslagen in de

Op een vergelijkbare manier bekijken we een voorbeeld met berekende eigenschappen:javascriptconst person = {firstName: ‘John’,lastName: ‘Doe’,fullName() {return this.firstName \+ ’ ’ \ this.lastName;}};console.log(person.fullName); // Output: John Doe

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

De herziene code presenteert een meer beknopte en gestroomlijnde aanpak voor het lezen van de leeftijden van zowel de vader als de zoon, terwijl ook gebruik wordt gemaakt van een berekende eigenschap om hun gecombineerde totaal op te slaan. Door gebruik te maken van Vue’s krachtige data-bindingsmogelijkheden via interpolaties binnen de sjabloonsectie, kan de informatie naadloos worden weergegeven aan de gebruiker.

Het gebruik van berekende eigenschappen biedt een efficiëntere manier om de som van twee leeftijdswaarden te bepalen in vergelijking met het vertrouwen op watchers. De implementatie van watchers in deze context kan resulteren in langere laadtijden en het debuggen bemoeilijken vanwege een inherent complexere codebase.

Het is raadzaam om watchers uitsluitend te gebruiken voor het observeren van en reageren op wijzigingen in gegevens in plaats van ze te gebruiken als alternatief voor berekende eigenschappen, die specifiek zijn ontworpen voor het afleiden van aanvullende informatie uit huidige reactieve gegevens.

De onmiddellijke optie die beschikbaar is voor watchers in Vue

De optie “immediate”, die dient als een alternatieve keuze tijdens het proces van het maken van een watcher, dicteert of de callback-functie van de watcher al dan niet onmiddellijk zal worden uitgevoerd na het succesvol mounten van het bijbehorende Vue-component.

Zeker, hier is een illustratie van een component die een watcher functie gebruikt met het “immediate” attribuut:

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

Bij het begin van de levenscyclus van het bovengenoemde component zal de watcher onmiddellijk de bijbehorende functie uitvoeren en “Count changed from an indeterminate state to ten” registreren in het systeemlogboek. Een dergelijke actie geeft aan dat aan de voorlopige entiteit geen waarde was toegewezen voordat Vue een waarde van tien had toegevoegd aan de tellerreferentie.

In bepaalde situaties kan het gebruik van de “immediate” optie voordelig zijn voor het uitvoeren van een initiële handeling of initialisatie die afhankelijk is van de huidige status van een bewaakt attribuut. Ter illustratie, als uw applicatie gegevens van een API moet ophalen zodra het een specifiek onderdeel aankoppelt.

De diepe optie beschikbaar in Vue Watchers

Vue’s watcher functie biedt een diep niveau van observatie voor wijzigingen binnen ingesloten objecten of arrays, waardoor het mogelijk is om wijzigingen te detecteren die plaatsvinden binnen diep ingesloten eigenschappen. Deze mogelijkheid wordt geactiveerd door de corresponderende parameter op zijn bevestigende equivalent in te stellen.

Hier is een illustratie van een Vue.js-component dat de “deep”-optie gebruikt, waarmee geneste objecten kunnen worden weergegeven en bewerkt in een boomachtige structuur binnen het invoerveld:

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

Het meegeleverde codesegment initialiseert de data referentie met een object dat een “length”-attribuut bezit. Vervolgens wordt de optie “diep” ingeschakeld en wordt in de console geverifieerd dat de gegevens zijn bijgewerkt omdat de waarde van de eigenschap “lengte” is veranderd van de oorspronkelijke status in drieëndertig (33).

Bij het initialiseren van een gegevensvariabele in Vue als een reactief object, is het in staat om wijzigingen in diep geneste objecten bij te houden zonder gebruik te maken van de “deep” optie. Omgekeerd, als de “deep” optie niet is ingeschakeld, zal de watch functie wijzigingen aan dergelijke objecten niet detecteren.

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

De meegeleverde code bevat een watch-functie die, na het detecteren van wijzigingen aan het reactieve object waarnaar wordt verwezen als “data”, een bericht naar de console logt dat aangeeft dat deze wijzigingen hebben plaatsgevonden.

Betere apps bouwen met Vue watchers

Vue’s watchers maken een hoge mate van reactief gedrag mogelijk binnen een applicatie door het observeren van wijzigingen in specifieke data-eigenschappen mogelijk te maken en vooraf bepaalde bewerkingen te triggeren in combinatie met dergelijke wijzigingen.

Het verkrijgen van een vaardig begrip van de juiste omstandigheden voor het gebruik van watchers, het onderscheiden van hun verschillen met berekende eigenschappen en het vertrouwd raken met keuzes zoals direct en diep kan iemands vermogen om zeer reactieve Vue-applicaties te bouwen aanzienlijk vergroten.