0Pricing
Sveltejs Academy · Aula

beforeUpdate e afterUpdate

Associe-se ao ciclo de atualização para inspecionar ou modificar o DOM antes e depois de alterações reativas.

beforeUpdate e afterUpdate é uma aula grátis de Sveltejs 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 Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.

Quando são executados

beforeUpdate é executado antes que as atualizações reativas sejam aplicadas ao DOM; afterUpdate é executado imediatamente depois.

Casos de uso

Use-os para ler medições do DOM antes das alterações e ajustar a posição de rolagem depois.

Rolagem automática do chat

Um uso clássico é rolar automaticamente um chat até o fim somente quando o usuário já estiver no fim.

let div, autoscroll;
beforeUpdate(() => {
  autoscroll = div && (div.scrollTop + div.offsetHeight >= div.scrollHeight - 20);
});
afterUpdate(() => {
  if (autoscroll) div.scrollTo(0, div.scrollHeight);
});

Executados com frequência

Essas funções de retorno são executadas a cada atualização. Mantenha-as rápidas.

Comportamento no servidor

Elas não são executadas durante o SSR. Trate-as como exclusivas do navegador.

Associe com cuidado

O estado salvo em beforeUpdate pode ser aplicado em afterUpdate para padrões de medir e aplicar.

Evite para a maior parte da lógica

A maior parte da lógica deve ficar em instruções reativas ou ações. Use estas funções somente para medições do DOM.

Ordem de execução

Ordem por atualização: instruções reativas -> beforeUpdate -> atualização do DOM -> afterUpdate.

Primeira montagem

Ambas são executadas na primeira montagem, além das atualizações seguintes. Considere essa execução inicial.

Combine com bind:this

Você precisa de uma referência ao elemento do DOM para fazer a medição. Use bind:this.

Alternativa com tick

Para medições pontuais após uma alteração, await tick() pode ser mais legível.

Verificação rápida

Quando afterUpdate é executado?

Recapitulação

beforeUpdate captura o estado anterior à alteração; afterUpdate lê ou modifica o DOM recém-atualizado.

Perguntas Frequentes

A aula “beforeUpdate e afterUpdate” é grátis?

Sim — o texto completo de “beforeUpdate e afterUpdate” é 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 Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.

O que vou aprender em “beforeUpdate e afterUpdate”?

Associe-se ao ciclo de atualização para inspecionar ou modificar o DOM antes e depois de alterações reativas. Você pratica Sveltejs 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 Sveltejs Academy?

Nenhuma experiência prévia é necessária. Sveltejs 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 “beforeUpdate e afterUpdate”?

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 Sveltejs Academy?

Sim. Cada aula de Sveltejs 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

  1. onMount: execução após a renderização
  2. onDestroy: limpeza
  3. beforeUpdate e afterUpdate
  4. tick(): aguardando atualizações do DOM
← Voltar para Sveltejs Academy