Kas ir 'watch' un 'computed' Vue.js, un kā tie darbojas?

watch (novērotāji)

• Izmanto reaktīvas īpašības izmaiņas reakcijai.
• Atļauj veikt asynhronas operācijas, atlikt izpildi vai veikt komplicētus aprēķinus, kad īpašības vērtība mainās.
• Konfigurējas ar watch opciju komponenta iekšienē.
• Var būt parametri handler (funkcija apstrādātājs), deep (dziļa novērošana iekšējo objektu/masīvu) un immediate (izpildīt apstrādātāju komponenta izveides laikā).

Piemērs:

watch: {
  // Novēro `firstName` īpašības izmaiņas
  firstName(newValue, oldValue) {
    console.log(`Vārds mainījās no ${oldValue} uz ${newValue}`);
  },
  // Dziļi novēro `userInfo` objektu
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Lietotāja informācija mainījās.');
    },
    deep: true
  }
}

aprēķinātās īpašības (computed)

• Izmanto deklaratīvi veidot atkarīgas reakcijas datus.
• Rezultāts tiek kešots līdz mainās tā atkarības.
• Aprēķināms lēni, tikai tad, kad uz to tiek vērsta uzmanība.
• Konfigurē ar computed opciju komponenta iekšienē.
• Jāatgriež vērtība.

Piemērs:

computed: {
  // Aprēķina pilnu vārdu, balstoties uz `firstName` un `lastName`
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Filtrē lietotāju sarakstu
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Galvenās atšķirības

Raksturlielums	watch	computed
Mērķis	Reaģēt uz īpašības izmaiņām	Aprēķināt atkarīgos datus
Kešošana	Nē	Jā (atkarībā no)
Lēnība	Nē	Jā
Atgrieztā vērtība	Nē (veic blakus efektu)	Jā (atgriež aprēķināto vērtību)
Asinhronitāte	Jā	Nē
Sintakse	Objekts ar funkcijām apstrādātājiem	Objekts ar funkcijām, kas atgriež vērtību

Izmantojiet computed, lai iegūtu reaktīvus datus, kas ir atvasināti no citiem datiem. Izmantojiet watch, lai veiktu blakus efektus (piemēram, API izsaukumi, DOM izmaiņas), kad mainās reaktīvās īpašības vērtība, vai lai veiktu sarežģītākas loģiskas reakcijas.