Vue Academy · Aula

onMounted e onBeforeMount

Acesso ao DOM em onMounted e por que onBeforeMount raramente precisa ser usado diretamente.

Aula 2 de 413 etapas

onMounted e onBeforeMount é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Ganchos em Torno da Montagem

A fase de montagem tem dois ganchos: onBeforeMount é executado imediatamente antes de o DOM ser criado, e onMounted é executado logo depois de ele ser inserido. Eles parecem semelhantes, mas atendem a necessidades muito diferentes.

onMounted: o DOM está pronto

Quando onMounted é executado, o modelo do componente já foi renderizado e está na página. As referências do modelo apontam para elementos reais, portanto é aqui que o trabalho com o DOM deve ser feito.

<script setup>
import { ref, onMounted } from 'vue'
const box = ref(null)
onMounted(() => {
  console.log(box.value.offsetWidth)
})
</script>

Caso de uso: inicializar um gráfico

As bibliotecas que desenham em um elemento do DOM precisam que esse elemento exista primeiro. Inicialize-as em onMounted, passando o elemento referenciado.

<script setup>
import { ref, onMounted } from 'vue'
const canvas = ref(null)
onMounted(() => {
  const ctx = canvas.value.getContext('2d')
  // draw chart with ctx
})
</script>

Caso de uso: medições do DOM

Ler tamanhos, posições ou deslocamentos de rolagem exige um DOM real. onMounted é o primeiro momento seguro para medir um elemento.

onMounted(() => {
  const rect = box.value.getBoundingClientRect()
  console.log(rect.height)
})

Caso de uso: busca inicial de dados

Buscar dados quando o componente aparece é uma tarefa clássica de onMounted. Armazene o resultado em uma referência para que o modelo seja atualizado quando os dados chegarem.

<script setup>
import { ref, onMounted } from 'vue'
const posts = ref([])
onMounted(async () => {
  const res = await fetch('/api/posts')
  posts.value = await res.json()
})
</script>

onMounted é executado uma vez

onMounted é executado uma única vez por instância do componente. Se o componente for desmontado e criado novamente mais tarde, a nova instância executará seu próprio onMounted.

onBeforeMount: imediatamente antes da inserção

onBeforeMount é executado depois da configuração, mas antes de o DOM ser criado. O estado reativo existe, mas as referências do modelo ainda são null, pois nada foi renderizado.

<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
  console.log('about to render')
})
</script>

Por que onBeforeMount raramente é necessário

A maior parte do trabalho de configuração pode ser feita diretamente em <script setup> (que já é executado antes da montagem), e tudo o que estiver relacionado ao DOM deve aguardar onMounted. Por isso, onBeforeMount tem poucas aplicações práticas.

Um erro comum

Tentar acessar uma referência do modelo dentro da configuração ou de onBeforeMount retorna null. O elemento não existe até a montagem ser concluída. Sempre mova o acesso ao DOM para onMounted.

<script setup>
import { ref } from 'vue'
const input = ref(null)
console.log(input.value) // null - too early!
</script>

Registrando vários ganchos

Você pode chamar onMounted mais de uma vez; todas as funções de retorno são executadas na ordem. É por isso que funções reutilizáveis podem registrar seu próprio onMounted de forma independente.

onMounted(() => console.log('first'))
onMounted(() => console.log('second'))

Escolhendo entre eles

onMounted: DOM disponível — gráficos, medições, foco e busca de dados.
onBeforeMount: gancho de pré-renderização, sem DOM, raramente necessário.

Verificação rápida

Teste sua compreensão dos ganchos de montagem.

Responda na aula interativa

Recapitulação

Resumo dos ganchos de montagem:

onMounted é executado após a inserção do DOM — use-o para inicializar gráficos, fazer medições, definir o foco e buscar dados inicialmente.
Ele é executado uma vez por instância e pode ser registrado várias vezes.
onBeforeMount é executado antes da renderização, sem acesso ao DOM, e raramente é necessário.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 42
Aulas: 156

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “onMounted e onBeforeMount” é grátis?

Sim — o texto completo de “onMounted e onBeforeMount” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “onMounted e onBeforeMount”?

Acesso ao DOM em onMounted e por que onBeforeMount raramente precisa ser usado diretamente. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “onMounted e onBeforeMount”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Vue Academy