Vue Academy · Aula

onUnmounted e padrões de limpeza

Limpeza de intervalos, remoção de listeners de eventos e cancelamento de requisições em onUnmounted.

onUnmounted e padrões de limpeza é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 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.

Fazendo a limpeza necessária

Quando um componente é removido, tudo o que ele iniciou — temporizadores, ouvintes, assinaturas e solicitações de rede — continua em execução, a menos que você interrompa esses recursos. O gancho onUnmounted é o lugar onde você faz a limpeza para evitar vazamentos de memória e erros.

O gancho onUnmounted

onUnmounted é executado depois que o componente foi removido do DOM. É a última oportunidade para liberar recursos.

<script setup>
import { onUnmounted } from 'vue'
onUnmounted(() => {
  console.log('component removed')
})
</script>

Padrão: limpando intervalos

Se você iniciar um intervalo em onMounted, limpe-o em onUnmounted. Caso contrário, a função de retorno continuará sendo executada depois que o componente desaparecer, frequentemente causando uma falha ao tentar acessar um estado inexistente.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

Padrão: removendo ouvintes de eventos

Os ouvintes globais em window ou document continuam existindo após a remoção do componente. Sempre associe addEventListener a removeEventListener.

<script setup>
import { onMounted, onUnmounted } from 'vue'
function onResize() {}
onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

Padrão: cancelando solicitações de busca

Uma solicitação pendente que seja concluída após a desmontagem pode alterar o estado de um componente que já não existe. Use um AbortController para cancelá-la durante a limpeza.

<script setup>
import { onMounted, onUnmounted } from 'vue'
const controller = new AbortController()
onMounted(() => {
  fetch('/api/data', { signal: controller.signal })
})
onUnmounted(() => controller.abort())
</script>

Padrão: cancelando assinaturas

As assinaturas de armazenamentos, sockets ou barramentos de eventos precisam ser desfeitas. Salve a função de cancelamento e chame-a em onUnmounted.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let unsubscribe
onMounted(() => { unsubscribe = store.subscribe(handler) })
onUnmounted(() => unsubscribe && unsubscribe())
</script>

watch retorna uma função de interrupção

Chamar watch retorna uma função que o interrompe. Os observadores criados durante a configuração são interrompidos automaticamente, mas os criados mais tarde (por exemplo, dentro de outra função de retorno) devem ser interrompidos manualmente.

<script setup>
import { watch, onUnmounted } from 'vue'
const stop = watch(source, handler)
onUnmounted(() => stop())
</script>

Função de retorno de limpeza de watchEffect

Dentro de watchEffect, você recebe uma função onCleanup para fazer a limpeza antes da próxima execução ou ao interromper. Isso mantém organizados os recursos de cada execução.

watchEffect((onCleanup) => {
  const timer = setTimeout(doWork, 500)
  onCleanup(() => clearTimeout(timer))
})

Por que a limpeza é importante

Ignorar a limpeza causa vazamentos de memória (recursos nunca liberados), ouvintes duplicados (várias montagens se acumulam) e erros (funções de retorno acessando um estado destruído). Código bem organizado sempre desfaz o que configurou.

Funções reutilizáveis tornam isso automático

Funções reutilizáveis bem escritas registram sua própria limpeza em onUnmounted. É por isso que funções reutilizáveis do VueUse, como useEventListener, removem o ouvinte por você — a limpeza já está incorporada.

Lista de verificação da limpeza

setInterval/setTimeout -> limpe-os.
addEventListener -> remova-o.
fetch -> cancele com AbortController.
assinaturas -> chame unsubscribe.
observadores manuais -> chame a função de interrupção retornada.

Verificação rápida

Teste sua compreensão da limpeza.

Recapitulação

Elementos essenciais da limpeza:

onUnmounted é executado após a remoção — libere os recursos aqui.
Limpe intervalos e tempos limite, remova ouvintes, cancele buscas e desfaça assinaturas.
watch retorna uma função de interrupção que deve ser chamada em onUnmounted quando necessário.
watchEffect fornece uma função de retorno onCleanup para a limpeza de cada execução.

Perguntas Frequentes

A aula “onUnmounted e padrões de limpeza” é grátis?

Sim — o texto completo de “onUnmounted e padrões de limpeza” é 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 “onUnmounted e padrões de limpeza”?

Limpeza de intervalos, remoção de listeners de eventos e cancelamento de requisições em onUnmounted. 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 4 de 4.

Quanto tempo leva a aula “onUnmounted e padrões de limpeza”?

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