watch() Observar mudanças em dados reativos
Última atualização: 2026-10-22
watch() Observar mudanças em dados reativos
watch() observa uma ou mais fontes reativas e executa um callback quando mudam, recebendo os valores antigos e novos — ideal para lógica reativa com efeitos colaterais.
| Grupo | Reatividade: Essencial |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
watch(source, (newVal, oldVal) => { ... }, { immediate: true, deep: true })
// observando múltiplas fontes
watch([count, keyword], ([c, k], [oc, ok]) => { ... })⚙️ Argumentos
| source | ref / função getter / objeto reativo / array |
|---|---|
| callback | (newValue, oldValue, onCleanup) => void |
| options | immediate (executa de imediato) / deep (observação profunda) / flush (pre|post|sync) |
Retorno：Uma função stop para interromper a observação
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Editing the input shows 'old → new', e.g. '10 → 12'.💡 Pontos-chave
💡 Dica Por padrão é preguiçoso: não executa na inicialização; para rodar também na primeira vez, adicione immediate: true.
⚠️ Aviso deep: true percorre objetos grandes recursivamente, com custo de desempenho evidente; para observar um campo específico, um getter (() => obj.a) é mais preciso.
⚠️ Aviso Efeitos colaterais assíncronos (como requisições) devem cancelar a requisição antiga no onCleanup / onWatcherCleanup; caso contrário, a ordem das respostas se mistura.
🏷️ Essencial relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Qual a diferença entre watch e computed?
R computed deriva um valor a partir dos dados (com retorno e cache); watch reage a mudanças para executar efeitos colaterais (requisições, alterar DOM, salvar localmente), sem retorno.
P Como fazer o watch executar já na primeira vez?
R Adicione { immediate: true }; o callback roda uma vez no setup (com oldValue igual a undefined).
P O watch pode observar vários dados?
R Sim, passando um array: watch([a, b], ([newA, newB]) => ...).
