Co jsou 'watch' a 'computed' ve Vue.js a jak fungují?

watch (pozorovatelé)

• Používá se k reakci na změny konkrétní reaktivní vlastnosti.
• Umožňuje provádět asynchronní operace, odkládat provedení nebo provádět složitější výpočty, když se změní hodnota vlastnosti.
• Konfiguruje se pomocí volby watch uvnitř komponenty.
• Může mít parametry handler (obslužná funkce), deep (hlubké sledování vnořených objektů/polí) a immediate (provedení obslužné funkce při vytvoření komponenty).

Příklad:

watch: {
  // Sleduje změny vlastnosti `firstName`
  firstName(newValue, oldValue) {
    console.log(`Jméno se změnilo z ${oldValue} na ${newValue}`);
  },
  // Hluboce sleduje objekt `userInfo`
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Informace o uživateli byly změněny.');
    },
    deep: true
  }
}

computed (počítané vlastnosti)

• Používá se k deklarativnímu vytváření závislých reaktivních dat.
• Výsledek je uložen v cache dokud se nezmění jeho reaktivní závislosti.
• Je lenivě vypočítávaný, pouze když je k němu přistupováno.
• Konfiguruje se pomocí volby computed uvnitř komponenty.
• Musí vracet hodnotu.

Příklad:

computed: {
  // Vypočítá úplné jméno na základě firstName a lastName
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Filtruje seznam uživatelů
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Hlavní rozdíly

Vlastnost	watch	computed
Účel	Reagovat na změnu vlastnosti	Vypočítat závislá data
Cache	Ne	Ano (podle závislostí)
Lenivost	Ne	Ano
Hodnota vrácená	Ne (provádí vedlejší efekty)	Ano (vrací vypočítanou hodnotu)
Asynchronní	Ano	Ne
Syntaxe	Objekt s funkcemi obsluhy	Objekt s funkcemi, které vracejí hodnoty

Použijte computed pro získání reaktivních dat odvozených od jiných dat. Použijte watch pro provádění vedlejších efektů (například volání API, změny DOM), když se změní hodnota reaktivní vlastnosti, nebo pro složitější reakce.