Čo sú 'watch' a 'computed' vo Vue.js a ako fungujú?

watch (pozorovatelia)

• Používa sa na reakciu na zmenu konkrétnej reaktívnej vlastnosti.
• Umožňuje vykonávať asynchrónne operácie, oneskorenie vykonania alebo vykonávanie zložitých výpočtov, keď sa hodnota vlastnosti zmení.
• Konfiguruje sa pomocou možnosti watch v rámci komponentu.
• Môže mať parametre handler (funkcia-obsluha), deep (hlboké sledovanie vnorených objektov/zoznamov) a immediate (vykonanie obsluhy pri vytvorení komponentu).

Príklad:

watch: {
  // Sleduje zmenu vlastnosti `firstName`
  firstName(newValue, oldValue) {
    console.log(`Meno sa zmenilo z ${oldValue} na ${newValue}`);
  },
  // Hlboko sleduje objekt `userInfo`
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Informácie o používateľovi boli zmenené.');
    },
    deep: true
  }
}

computed (vypočítavané vlastnosti)

• Používa sa na deklaratívne vytváranie závislých reaktívnych dát.
• Výsledok je cache-ovaný dovtedy, kým sa nezmenia jeho reaktívne závislosti.
• Vypočítava sa lenivým spôsobom, iba keď sa naň odkazuje.
• Konfiguruje sa pomocou možnosti computed v rámci komponentu.
• Musí vracať hodnotu.

Príklad:

computed: {
  // Vypočíta úplné meno na základe firstName a lastName
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Filtruje zoznam používateľov
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Hlavné rozdiely

Príznak	watch	computed
Účel	Reagovať na zmenu vlastnosti	Vypočítať závislé dáta
Cache	Nie	Áno (podľa závislostí)
Lenivosť	Nie	Áno
Return hodnota	Nie (vykonáva vedľajší efekt)	Áno (vracia vypočítanú hodnotu)
Asynchrónnosť	Áno	Nie
Syntax	Objekt s funkciami-obsluhovačmi	Objekt s funkciami, ktoré vracajú hodnotu

Používajte computed na získanie reaktívnych dát, ktoré sú odvodené od iných dát. Používajte watch na vykonávanie vedľajších efektov (napríklad volania API, zmeny v DOM), keď sa hodnota reaktívnej vlastnosti zmení, alebo na vykonávanie zložitejších logických reakcií.