A função de limpeza destroy()
Retorne uma função destroy de uma ação para limpar ouvintes de eventos e observadores.
A função de limpeza destroy() é 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.
Por que limpar
As ações frequentemente adicionam ouvintes ou observadores. A limpeza evita vazamentos de memória quando o elemento é desmontado.
Retornar a destruição
Uma ação pode retornar um objeto com uma função destroy(). O Svelte a chama durante a desmontagem.
function listen(node) {
function onClick() { /* ... */ }
node.addEventListener("click", onClick);
return { destroy() { node.removeEventListener("click", onClick); } };
}Liberar os recursos
Tudo o que for alocado (ouvintes, observadores, intervalos) deve ser liberado na destruição.
Destruição idempotente
A destruição é chamada uma vez. Ainda assim, escreva-a de forma defensiva para o caso de desmontagens repetidas.
Combinar atualização e destruição
Retorne ambos para cobrir todo o ciclo de vida: reaja às alterações de parâmetros e faça a limpeza durante a desmontagem.
Observadores
Pause e desconecte IntersectionObservers, ResizeObservers e MutationObservers durante a destruição.
Quadros de animação
Cancele quaisquer ciclos pendentes de requestAnimationFrame para evitar trabalho desperdiçado.
Limpeza assíncrona
A destruição pode ser síncrona. Se precisar de uma limpeza assíncrona, inicie as tarefas de limpeza sem aguardar o resultado.
Análise de memória
Use as ferramentas de memória do navegador para confirmar que as ações liberam as referências após a desmontagem.
Tipos do TypeScript
O tipo de retorno é ActionReturn<Params> de svelte/action.
Erro comum
Esquecer-se de retornar a destruição mantém os ouvintes associados depois que o elemento desaparece. Sempre associe a adição à remoção.
Verificação rápida
Quando a destruição é executada?
Recapitulação
Retorne { destroy } da sua ação para limpar ouvintes e observadores durante a desmontagem.
Perguntas Frequentes
A aula “A função de limpeza destroy()” é grátis?
Sim — o texto completo de “A função de limpeza destroy()” é 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 “A função de limpeza destroy()”?
Retorne uma função destroy de uma ação para limpar ouvintes de eventos e observadores. 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 “A função de limpeza destroy()”?
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
- Sintaxe da diretiva use:
- Parâmetros e atualizações de ações
- A função de limpeza destroy()
- Ações práticas: clickOutside tooltip autofocus