onMounted() Hook de conclusão da montagem
Última atualização: 2026-10-22
onMounted() Hook de conclusão da montagem
onMounted() é chamado depois que o componente e seus filhos são montados no DOM: é o lugar padrão para obter referências de template, inicializar bibliotecas de terceiros e fazer requisições.
| Grupo | Hooks de Ciclo de Vida |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
onMounted(() => {
console.log(el.value.offsetWidth) // o DOM está disponível
})⚙️ Argumentos
| callback | Função executada após a montagem |
|---|
Retorno：Nada
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Shows the paragraph's real pixel width.💡 Pontos-chave
💡 Dica Inicialização de bibliotecas de terceiros (gráficos, editores), medição de DOM e requisições da primeira tela — tudo aqui.
⚠️ Aviso Em SSR, o servidor não executa onMounted (só executa no navegador); coloque aqui a lógica que depende do DOM para evitar erros.
ℹ️ Nota O onMounted do componente pai ocorre depois que todos os componentes filhos terminam de montar.
🏷️ Hooks de Ciclo de Vida relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Por que aqui consegue acessar o DOM e no setup não?
R Quando o setup executa, o componente ainda não foi renderizado; onMounted só dispara depois que a renderização é gravada no DOM.
P Qual a diferença de onUpdated?
R onMounted executa apenas uma vez; onUpdated executa a cada atualização do componente.
P O callback pode ser async?
R Pode ser escrito como função async, mas o próprio registro precisa ser uma chamada síncrona.
