Qu'est-ce que 'watch' et 'computed' dans Vue.js, et comment fonctionnent-ils?

watch (observateurs)

• Utilisé pour réagir aux changements d'une propriété réactive spécifique.
• Permet d'effectuer des opérations asynchrones, de retarder l'exécution ou d'effectuer des calculs complexes lorsque la valeur de la propriété change.
• Se configure avec l'option watch dans le composant.
• Peut avoir des paramètres handler (fonction gestionnaire), deep (observation profonde des objets/arrays imbriqués) et immediate (exécuter le gestionnaire lors de la création du composant).

Exemple:

watch: {
  // Surveille le changement de la propriété `firstName`
  firstName(newValue, oldValue) {
    console.log(`Le prénom a changé de ${oldValue} à ${newValue}`);
  },
  // Surveille profondément l'objet `userInfo`
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Les informations de l’utilisateur ont changé.');
    },
    deep: true
  }
}

computed (propriétés calculées)

• Utilisé pour créer de manière déclarative des données réactives dépendantes.
• Le résultat est mis en cache jusqu'à ce que ses dépendances réactives changent.
• Calculé paresseusement, uniquement lorsqu'il est accédé.
• Se configure avec l'option computed dans le composant.
• Doit retourner une valeur.

Exemple:

computed: {
  // Calcule le nom complet basé sur firstName et lastName
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Filtre la liste des utilisateurs
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Principales différences

Caractéristique	watch	computed
Objectif	Réagir aux changements d'une propriété	Calculer des données dépendantes
Caché	Non	Oui (en fonction des dépendances)
Paresseux	Non	Oui
Valeur de retour	Non (effectue des effets secondaires)	Oui (renvoie une valeur calculée)
Asynchrone	Oui	Non
Syntaxe	Objet avec fonctions gestionnaires	Objet avec fonctions renvoyant des valeurs

Utilisez computed pour obtenir des données réactives dérivées d'autres données. Utilisez watch pour effectuer des effets secondaires (par exemple, appels API, modifications du DOM) lorsque la valeur d'une propriété réactive change, ou pour effectuer des réactions logiques plus complexes.