onUpdated() Hook de conclusão da atualização
Última atualização: 2026-10-22
onUpdated() Hook de conclusão da atualização
onUpdated() é chamado depois que o componente re-renderiza por mudanças reativas e o DOM é atualizado: adequado para ler dimensões do DOM atualizado ou sincronizar bibliotecas de terceiros.
| Grupo | Hooks de Ciclo de Vida |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
onUpdated(() => {
// o DOM já está no estado mais recente
})⚙️ Argumentos
| callback | Função executada após a atualização |
|---|
Retorno：Nada
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The height figure follows the font-size changes.💡 Pontos-chave
⚠️ Aviso Nunca altere estado dentro do hook: isso dispara atualização novamente e forma um loop infinito.
💡 Dica Quando precisar rastrear com precisão a mudança de um dado, prefira watch/watchPostEffect; este hook só serve para cenários de ação a cada atualização (como recalcular layout).
ℹ️ Nota O onUpdated do componente pai dispara depois que seus filhos atualizam.
🏷️ Hooks de Ciclo de Vida relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Por que alterar dados aqui vira loop infinito?
R A alteração dispara uma nova rodada de atualização, o hook executa de novo e altera novamente, e assim sucessivamente.
P A relação com nextTick?
R Em termos de momento, onUpdated pertence à fase posterior à atualização do DOM, o mesmo momento após await nextTick().
P Quando é obrigatório usá-lo?
R Quando após qualquer mudança de dados é preciso sincronizar medição de DOM/bibliotecas de terceiros e não há como enumerar as dependências específicas.
