Ce sunt 'watch' și 'computed' în Vue.js și cum funcționează?

watch (observatori)

• Se utilizează pentru a reacționa la modificări ale unei proprietăți reactive specifice.
• Permite efectuarea de operații asincrone, întârzierea execuției sau efectuarea de calcule complexe atunci când valoarea proprietății se schimbă.
• Se configurează cu opțiunea watch în interiorul componentei.
• Poate avea parametri precum handler (funcție handler), deep (observare profundă a obiectelor/array-urilor imbricate) și immediate (executarea handler-ului la crearea componentei).

Exemplu:

watch: {
  // Observă schimbările în proprietatea `firstName`
  firstName(newValue, oldValue) {
    console.log(`Numele s-a schimbat de la ${oldValue} la ${newValue}`);
  },
  // Observă în profunzime obiectul `userInfo`
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Informațiile despre utilizator au fost modificate.');
    },
    deep: true
  }
}

computed (proprietăți calculate)

• Se utilizează pentru a crea date reactive dependente într-un mod declarativ.
• Rezultatul este stocat în cache până când dependențele sale reactive se schimbă.
• Se calculează lazily, doar atunci când este accesat.
• Se configurează cu opțiunea computed în interiorul componentei.
• Trebuie să returneze o valoare.

Exemplu:

computed: {
  // Calculează numele complet pe baza lui firstName și lastName
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Filtrează lista de utilizatori
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Diferențe principale

Caracteristică	watch	computed
Scop	Reacționează la schimbarea unei proprietăți	Calculează date dependente
Caching	Nu	Da (în funcție de dependențe)
Lazy	Nu	Da
Valoare returnată	Nu (execută efecte secundare)	Da (returnează valoarea calculată)
Asincron	Da	Nu
Sintaxă	Obiect cu funcții handler	Obiect cu funcții care returnează valori

Utilizați computed pentru a obține date reactive derivate din alte date. Utilizați watch pentru a executa efecte secundare (de exemplu, apeluri API, modificări DOM) atunci când valoarea proprietății reactive se schimbă, sau pentru a realiza reacții mai complexe.