Qual é a diferença entre watch e watchEffect?

Question

Accepted Answer

Ambos executam efeitos colaterais em resposta a mudanças reativas, mas diferem em como as dependências são especificadas e que informações fornecem. Use-os para efeitos colaterais (chamadas de API, logging, trabalho manual com DOM) — **não** para derivar valores (isso é `computed`). ## watch — fonte explícita, fornece valores antigos + novos ```vue ``` `watch` observa uma fonte **específica** que você nomeia, executa o callback apenas quando essa fonte muda e fornece os valores **antigos e novos** — útil quando você precisa compará-los ou reagir a uma peça específica de estado. ## watchEffect — rastreamento automático de dependências, executa imediatamente ```vue ``` `watchEffect` **rastreia automaticamente** cada valor reativo usado dentro dele (sem lista de fonte) e executa **imediatamente na configuração** (depois re-executa em qualquer mudança de dependência). Sem valores antigos/novos. ## Lado a lado ```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 ``` ## Opções úteis de 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 ``` ## Por que isso importa Escolher a ferramenta correta mantém os efeitos colaterais reativos limpos: use **`computed`** para valores derivados, **`watch`** quando você precisa reagir a uma fonte específica ou comparar antigo/novo (por exemplo, buscar quando um id muda) e **`watchEffect`** para efeitos que dependem de vários valores e devem rastreá-los automaticamente. Mal usar watchers para derivação (em vez de `computed`) é um anti-padrão comum.