Wat zijn 'watch' en 'computed' in Vue.js, en hoe werken ze?

watch (wachters)

• Wordt gebruikt om te reageren op veranderingen in een specifieke reactieve eigenschap.
• Maakt het mogelijk om asynchrone operaties uit te voeren, de uitvoering uit te stellen of complexe berekeningen uit te voeren wanneer de waarde van de eigenschap verandert.
• Wordt geconfigureerd met de optie watch binnen het component.
• Kan parameters hebben zoals handler (verwerkingsfunctie), deep (diepe observatie van geneste objecten/arrays) en immediate (uitvoeren van de handler bij het maken van het component).

Voorbeeld:

watch: {
  // Observeert veranderingen in de eigenschap `firstName`
  firstName(newValue, oldValue) {
    console.log(`De naam is veranderd van ${oldValue} naar ${newValue}`);
  },
  // Observeert diepgaand het object `userInfo`
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Gebruikersinformatie is gewijzigd.');
    },
    deep: true
  }
}

computed (berekende eigenschappen)

• Wordt gebruikt om afhankelijke reactieve data declaratief te creëren.
• Het resultaat wordt in cache opgeslagen totdat de reactieve afhankelijkheden veranderen.
• Wordt lui berekend, alleen wanneer het wordt opgevraagd.
• Wordt geconfigureerd met de optie computed binnen het component.
• Moet een waarde teruggeven.

Voorbeeld:

computed: {
  // Berekent de volledige naam op basis van firstName en lastName
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Filtert de lijst met gebruikers
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Belangrijkste verschillen

Kenmerk	watch	computed
Doel	Reageren op verandering van een eigenschap	Afhankelijke data berekenen
Caching	Nee	Ja (afhankelijk van dependencies)
Lui	Nee	Ja
Return-waarde	Nee (voert bijeffecten uit)	Ja (gecalculeerde waarde retourneert)
Asynchroon	Ja	Nee
Syntaxis	Object met handlerfuncties	Object met functies die waarden teruggeven

Gebruik computed om reactieve data afgeleid van andere data te verkrijgen. Gebruik watch om bijeffecten uit te voeren (bijvoorbeeld API-aanroepen, DOM-wijzigingen) wanneer de waarde van een reactieve eigenschap verandert, of om complexere logische reacties uit te voeren.