Vue Academy · Aula

onUpdated e onBeforeUpdate

Reação a alterações em dados reativos e prevenção de ciclos infinitos de atualização em onUpdated.

onUpdated e onBeforeUpdate é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 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 das atualizações

Quando os dados reativos mudam, Vue renderiza o componente novamente. Dois ganchos delimitam esse processo: onBeforeUpdate é executado antes de o DOM ser atualizado, e onUpdated é executado depois.

onUpdated: após a atualização

onUpdated é executado quando o DOM já foi atualizado para refletir o novo estado reativo. Nesse momento, o DOM renderizado corresponde aos seus dados.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM is now up to date')
})
</script>

Lendo o DOM atualizado

Como a atualização foi concluída, onUpdated é o lugar certo para ler novos tamanhos ou posições de elementos que dependem da renderização mais recente.

<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
  console.log(list.value.scrollHeight)
})
</script>

A armadilha do loop infinito

Nunca altere o estado reativo dentro de onUpdated. Isso aciona outra renderização, que executa onUpdated novamente, que altera o estado outra vez — um loop infinito que congela o aplicativo.

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
  count.value++ // BAD: infinite update loop
})
</script>

Use watch em vez disso

Se quiser reagir à alteração de um valor específico, use watch, não onUpdated. Um observador monitora uma única fonte e evita o risco de loop, enquanto onUpdated é executado em toda renderização.

watch(count, (newVal) => {
  console.log('count became', newVal)
})

onBeforeUpdate: antes da atualização

onBeforeUpdate é executado depois de uma alteração reativa, mas antes de Vue atualizar o DOM. O DOM ainda exibe os valores antigos nesse momento.

<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
  console.log('DOM still has old values')
})
</script>

Caso de uso: captura antes da atualização

Como onBeforeUpdate acessa o DOM antigo, ele é perfeito para capturar uma situação antes da alteração — por exemplo, registrar a posição atual de rolagem para restaurá-la depois da atualização.

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
const el = ref(null)
let savedScroll = 0
onBeforeUpdate(() => { savedScroll = el.value.scrollTop })
onUpdated(() => { el.value.scrollTop = savedScroll })
</script>

Eles são executados em toda renderização

Ambos os ganchos são executados em cada ciclo de atualização, o que pode acontecer com frequência. Mantenha suas funções de retorno leves para evitar problemas de desempenho.

Não são para efeitos colaterais dos dados

Esses ganchos são voltados ao DOM, não aos seus dados. Para reações orientadas por dados, prefira computed (para valores derivados) ou watch (para efeitos colaterais em fontes específicas).

Recapitulação da ordem

Quando ocorre uma alteração reativa, a sequência é: o estado muda, onBeforeUpdate é executado (DOM antigo), Vue atualiza o DOM e, em seguida, onUpdated é executado (DOM novo).

Escolhendo entre eles

onBeforeUpdate: capture o estado antigo do DOM, como a rolagem ou a seleção.
onUpdated: leia o novo DOM após a atualização — mas nunca altere o estado reativo aqui.

Verificação rápida

Teste sua compreensão dos ganchos de atualização.

Recapitulação

Resumo dos ganchos de atualização:

onUpdated é executado após a atualização do DOM — leia os novos tamanhos aqui.
Nunca altere o estado reativo dentro dele (isso causa um loop infinito); use watch em vez disso.
onBeforeUpdate é executado antes da atualização, com o DOM antigo — é ótimo para capturas.
Ambos são executados em toda renderização, portanto mantenha-os leves.

Perguntas Frequentes

A aula “onUpdated e onBeforeUpdate” é grátis?

Sim — o texto completo de “onUpdated e onBeforeUpdate” é 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 “onUpdated e onBeforeUpdate”?

Reação a alterações em dados reativos e prevenção de ciclos infinitos de atualização em onUpdated. 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 3 de 4.

Quanto tempo leva a aula “onUpdated e onBeforeUpdate”?

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