onWatcherCleanup() Registrar callback de limpeza do observador
Última atualização: 2026-10-22
onWatcherCleanup() Registrar callback de limpeza do observador
onWatcherCleanup() registra uma função de limpeza chamada antes de o observador ficar inválido (reexecutar ou parar), para cancelar requisições, timers etc.
| Grupo | Reatividade: Essencial |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.5+ |
| Suporte a SSR | Sim |
📝 Sintaxe
watch(keyword, async () => {
const controller = new AbortController()
onWatcherCleanup(() => controller.abort())
const res = await fetch(url, { signal: controller.signal })
})⚙️ Argumentos
| cleanupFn | Função de limpeza, executada antes de o observador ficar inválido |
|---|
Retorno：Nada (chame dentro do callback do observador)
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Typing fast shows only the final result after a 600ms pause — earlier ones are cancelled.💡 Pontos-chave
⚠️ Aviso Só pode ser chamado na fase síncrona do callback do observador: chamar depois do await dá erro — registre com antecedência.
💡 Dica O terceiro parâmetro do callback do watch, onCleanup, é equivalente a esta função; ambas as formas são comuns.
ℹ️ Nota Cenários típicos: debounce de busca, cancelamento de requisições com condição de corrida, limpeza de reconexão de WebSocket.
🏷️ Essencial relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P O que acontece sem a limpeza?
R A requisição/timer antigo continua rodando: uma resposta antiga e lenta pode chegar depois e sobrescrever o novo resultado — a clássica condição de corrida.
P Qual a diferença para onUnmounted?
R onWatcherCleanup limpa antes de cada reexecução do observador; onUnmounted executa apenas uma vez, quando o componente é desmontado.
P Dá para usar dentro do watchEffect?
R Sim, o watchEffect também suporta (seu callback também pode receber o parâmetro onCleanup).
