watchEffect() Efeito colateral com rastreamento automático de dependências
Última atualização: 2026-10-22
watchEffect() Efeito colateral com rastreamento automático de dependências
watchEffect() executa imediatamente a função passada e rastreia automaticamente os dados reativos usados nela: basta uma dependência mudar para reexecutar.
| Grupo | Reatividade: Essencial |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
watchEffect(() => {
document.title = `${count.value} cliques` // rastreia count automaticamente
})
// recebe a função onCleanup quando precisa de limpeza
watchEffect((onCleanup) => { const t = setTimeout(fn, 500); onCleanup(() => clearTimeout(t)) })⚙️ Argumentos
| effect | Função de efeito colateral; recebe onCleanup para registrar a lógica de limpeza |
|---|---|
| options | flush (pre|post|sync) / onTrack / onTrigger |
Retorno：Uma função stop para interromper a observação
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The title becomes '0 clicks' on mount and updates after every click.💡 Pontos-chave
💡 Dica Não é preciso escrever a lista de dependências à mão: a ordem do código é irrelevante — tudo o que for lido é rastreado.
ℹ️ Nota Não há acesso ao valor antigo: quando precisar comparar valores antigos e novos, use o watch(), que declara as fontes manualmente.
⚠️ Aviso Se o efeito colateral faz requisições, use onCleanup para cancelar as antigas; caso contrário, mudanças rápidas criam condições de corrida.
🏷️ Essencial relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Como escolher entre watchEffect e watch?
R Dependências simples, sem valor antigo → watchEffect (código mais curto); precisa de valor antigo, controle preciso das dependências ou execução preguiçosa → watch.
P Por que ele executa mesmo para dados que não usei?
R Só os dados reativos realmente lidos são rastreados — se a leitura acontece dentro de um ramo condicional, as dependências variam conforme o caminho executado.
P O watchEffect pode ser interrompido?
R Sim, basta chamar o stop() retornado; ele também para automaticamente quando o componente é desmontado.
