Was ist der Unterschied zwischen watch und watchEffect?

Question

Accepted Answer

Beide führen side effects als Reaktion auf reaktive Änderungen aus, unterscheiden sich aber darin, wie Abhängigkeiten angegeben werden und welche Informationen sie bereitstellen. Verwenden Sie sie für side effects (API-Aufrufe, logging, manuelle DOM-Arbeiten) — **nicht** für die Ableitung von Werten (das ist `computed`). ## watch — explizite Quelle, liefert alte + neue Werte ```vue ``` `watch` beobachtet eine **spezifische** Quelle, die Sie benennen, führt den callback nur aus, wenn sich die Quelle ändert, und liefert die **alten und neuen Werte** — nützlich, wenn Sie diese vergleichen oder auf einen bestimmten State reagieren müssen. ## watchEffect — automatische Abhängigkeitsverfolgung, läuft sofort ```vue ``` `watchEffect` **verfolgt automatisch** alle im Inneren verwendeten reaktiven Werte (ohne Quellenliste) und läuft **sofort bei der Einrichtung** (dann bei jeder Abhängigkeitsänderung erneut). Keine alten/neuen Werte. ## Nebeneinander ```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 ``` ## Nützliche watch-Optionen ```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 ``` ## Warum es wichtig ist Das richtige Werkzeug auszuwählen hält reaktive side effects sauber: Verwenden Sie **`computed`** für abgeleitete Werte, **`watch`** wenn Sie auf eine bestimmte Quelle reagieren oder alte/neue Werte vergleichen müssen (z. B. fetch wenn sich eine id ändert), und **`watchEffect`** für Effekte, die von mehreren Werten abhängen und diese automatisch verfolgen sollen. Watchers für Ableitung (statt `computed`) zu missbrauchen ist ein häufiges Anti-Pattern.