{#key} para forçar uma nova renderização
Use o bloco key para destruir e recriar componentes quando um valor mudar.
{#key} para forçar uma nova renderização é 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.
O bloco key
{#key expr} destrói e recria seu conteúdo sempre que expr muda. Isso é útil quando você quer um componente novo.
Reiniciar animações
Envolva um elemento animado em {#key} para reproduzir a transição sempre que a chave mudar.
{#key id}
<div in:fade>{message}</div>
{/key}Redefinir o estado do componente
Envolva um componente filho com estado interno em {#key id} para redefinir completamente esse estado quando o id mudar.
{#key currentUser.id}
<UserProfile user={currentUser} />
{/key}Diferença em relação à chave de each
O bloco {#key} usa uma chave para um único elemento; {#each ... (key)} usa chaves para os itens de uma lista.
Quando usar
Use quando quiser redefinir um estado interno complexo sem limpar manualmente cada campo.
Custo de desempenho
Cada alteração de chave desmonta e recria a subárvore. Evite envolver árvores enormes se a chave mudar com frequência.
Tag de fechamento
Feche com {/key}.
Usos comuns
Reiniciar animações, redefinir valores de entrada não controlados e forçar uma nova busca ao navegar para uma nova entidade.
Alternativa: bind:this
Às vezes, você pode redefinir o estado imperativamente com uma referência. {#key} é mais limpo para redefinições declarativas.
Combinar com transições
Combine com transições para fornecer uma indicação visual suave de que algo mudou fundamentalmente.
Evitar para mudanças triviais
Não envolva conteúdo puramente reativo em {#key} — o Svelte já o atualiza com eficiência.
Verificação rápida
O que {#key x} faz quando x muda?
Recapitulação
{#key} força uma destruição e recriação completas sempre que sua expressão muda, sendo útil para redefinições e repetições de animações.
Perguntas Frequentes
A aula “{#key} para forçar uma nova renderização” é grátis?
Sim — o texto completo de “{#key} para forçar uma nova renderização” é 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 “{#key} para forçar uma nova renderização”?
Use o bloco key para destruir e recriar componentes quando um valor mudar. 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 “{#key} para forçar uma nova renderização”?
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
- {#if} {#else if} {#else}
- {#each} com índice e chave
- {#key} para forçar uma nova renderização
- {#each} aninhado e atualizações por chave