Какая разница между watch и watchEffect?

Question

Accepted Answer

Оба запускают побочные эффекты в ответ на реактивные изменения, но отличаются тем, как указываются зависимости и какую информацию они предоставляют. Используйте их для побочных эффектов (вызовы API, логирование, ручная работа с DOM) — **не** для получения производных значений (это `computed`). ## watch — явный источник, предоставляет старое и новое значения ```vue ``` `watch` отслеживает **конкретный** источник, который вы назвали, запускает callback только когда этот источник меняется и предоставляет **старое и новое значения** — полезно, когда нужно их сравнить или реагировать на одну конкретную часть состояния. ## watchEffect — автоматическое отслеживание зависимостей, запускается сразу ```vue ``` `watchEffect` **автоматически отслеживает** каждое реактивное значение, используемое внутри него (без списка источников), и запускается **сразу при инициализации** (затем переапускается при любом изменении зависимости). Нет старых/новых значений. ## Рядом друг с другом ```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 ``` ## Полезные опции watch ```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 ``` ## Почему это важно Выбор правильного инструмента позволяет держать реактивные побочные эффекты в чистоте: используйте **`computed`** для производных значений, **`watch`** когда нужно реагировать на конкретный источник или сравнивать старое/новое (например, fetch при изменении id), и **`watchEffect`** для эффектов, которые зависят от нескольких значений и должны отслеживать их автоматически. Использование watchers для получения производных значений (вместо `computed`) — распространённый антипаттерн.