Quelle est la différence entre watch et watchEffect ?

Question

Accepted Answer

Les deux exécutent des effets de bord en réponse aux changements réactifs, mais ils diffèrent dans la façon dont les dépendances sont spécifiées et les informations qu'elles vous donnent. Utilisez-les pour les effets de bord (appels API, logging, travaux DOM manuels) — **pas** pour dériver des valeurs (c'est `computed`). ## watch — source explicite, donne les anciennes et nouvelles valeurs ```vue ``` `watch` observe une source **spécifique** que vous nommez, exécute le callback uniquement quand cette source change, et fournit les **anciennes et nouvelles valeurs** — utile quand vous avez besoin de les comparer ou réagir à un morceau particulier d'état. ## watchEffect — suivi automatique des dépendances, s'exécute immédiatement ```vue ``` `watchEffect` **suit automatiquement** chaque valeur réactive utilisée à l'intérieur (pas de liste source), et s'exécute **immédiatement à la configuration** (puis se réexécute à tout changement de dépendance). Pas d'anciennes/nouvelles valeurs. ## Côte à côte ```text watch watchEffect Dependencies explicit (you name them) automatic (tracked from usage) Runs immediately? no (unless immediate:true) yes Old + new values? yes no Best for reacting to specific state, running an effect that depends needing prev value on several values ``` ## Options watch utiles ```js watch(source, cb, { immediate: true, // run once right away (like watchEffect) deep: true, // watch nested object changes }); watch([a, b], ([newA, newB]) => {}); // watch multiple sources ``` ## Pourquoi c'est important Choisir le bon outil garde les effets de bord réactifs propres : utilisez **`computed`** pour les valeurs dérivées, **`watch`** quand vous avez besoin de réagir à une source spécifique ou comparer anciennes/nouvelles (par ex. récupérer quand un id change), et **`watchEffect`** pour les effets qui dépendent de plusieurs valeurs et doivent les suivre automatiquement. Malutiliser les watchers pour la dérivation (au lieu de `computed`) est un anti-pattern courant.