Cosa sono 'watch' e 'computed' in Vue.js e come funzionano?

watch (osservatori)

• Utilizzato per reagire alle modifiche di una proprietà reattiva specifica.
• Permette di eseguire operazioni asincrone, ritardare l'esecuzione o eseguire calcoli complessi quando il valore della proprietà cambia.
• Si configura con l'opzione watch all'interno del componente.
• Può avere parametri handler (funzione gestore), deep (osservazione profonda di oggetti/array annidati) e immediate (eseguire il gestore alla creazione del componente).

Esempio:

watch: {
  // Osserva le modifiche alla proprietà `firstName`
  firstName(newValue, oldValue) {
    console.log(`Il nome è cambiato da ${oldValue} a ${newValue}`);
  },
  // Osserva in profondità l'oggetto `userInfo`
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Le informazioni dell’utente sono cambiate.');
    },
    deep: true
  }
}

computed (proprietà calcolate)

• Utilizzato per creare dati reattivi dipendenti in modo dichiarativo.
• Il risultato viene memorizzato nella cache finché le sue dipendenze reattive non cambiano.
• Viene calcolato pigramente, solo quando viene richiamato.
• Si configura con l'opzione computed all'interno del componente.
• Deve restituire un valore.

Esempio:

computed: {
  // Calcola il nome completo basato su firstName e lastName
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Filtra la lista degli utenti
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Differenze principali

Caratteristica	watch	computed
Scopo	Reagire alle modifiche di una proprietà	Calcolare dati dipendenti
Caching	No	Sì (in base alle dipendenze)
Pigrizia	No	Sì
Valore di ritorno	No (esegue effetti collaterali)	Sì (restituisce un valore calcolato)
Asincrono	Sì	No
Sintassi	Oggetto con funzioni gestore	Oggetto con funzioni che restituiscono valori

Utilizza computed per ottenere dati reattivi derivati da altri dati. Usa watch per eseguire effetti collaterali (ad esempio, chiamate API, modifiche al DOM) quando il valore di una proprietà reattiva cambia, o per eseguire reazioni più complesse.