Vue Academy · Lezione

onUnmounted e pattern di cleanup

Cancellazione degli intervalli, rimozione degli event listener, annullamento delle richieste in onUnmounted

Lezione 4 di 413 passaggi

onUnmounted e pattern di cleanup è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Fare pulizia

Quando un componente viene rimosso, tutto ciò che ha avviato — timer, listener, sottoscrizioni, richieste di rete — continua a essere eseguito se non lo interrompe. L'hook onUnmounted è il punto in cui eseguire la pulizia per prevenire perdite di memoria e bug.

L'hook onUnmounted

onUnmounted viene eseguito dopo che il componente è stato rimosso dal DOM. È l'ultima occasione per rilasciare le risorse.

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

Schema: cancellare gli intervalli

Se avvia un intervallo in onMounted, lo cancelli in onUnmounted. In caso contrario, la callback continuerà a essere eseguita dopo la rimozione del componente, causando spesso errori dovuti allo stato mancante.

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

Schema: rimuovere i listener degli eventi

I listener globali su window o document sopravvivono alla rimozione del componente. Abbini sempre addEventListener a removeEventListener.

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

Schema: annullare le richieste fetch

Una richiesta in sospeso che si completa dopo lo smontaggio può modificare lo stato di un componente non più attivo. Utilizzi un AbortController per annullarla durante la pulizia.

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

Schema: annullare le sottoscrizioni

Le sottoscrizioni a store, socket o event bus devono essere disattivate. Salvi la funzione di annullamento della sottoscrizione e la chiami in onUnmounted.

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

watch restituisce una funzione di interruzione

La chiamata a watch restituisce una funzione che lo interrompe. I watcher creati durante la configurazione vengono interrotti automaticamente, ma quelli creati in seguito (ad esempio all'interno di un'altra callback) devono essere interrotti manualmente.

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

Callback di pulizia di watchEffect

All'interno di watchEffect riceve una funzione onCleanup per eseguire la pulizia prima dell'esecuzione successiva o dell'interruzione. In questo modo le risorse di ogni esecuzione restano sotto controllo.

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

Perché la pulizia è importante

Saltare la pulizia causa perdite di memoria (risorse mai liberate), listener duplicati (le registrazioni si accumulano a ogni montaggio) ed errori (callback che accedono a uno stato distrutto). Il codice pulito rimuove sempre ciò che ha configurato.

I composable rendono tutto automatico

I composable ben scritti registrano la propria pulizia in onUnmounted. Per questo i composable di VueUse, come useEventListener, rimuovono il listener al posto Suo: la pulizia è integrata.

Checklist della pulizia

setInterval/setTimeout -> li cancelli.
addEventListener -> lo rimuova.
fetch -> lo annulli con AbortController.
sottoscrizioni -> chiami la funzione di annullamento.
watcher manuali -> chiami la funzione di interruzione restituita.

Verifica rapida

Metta alla prova le Sue conoscenze sulla pulizia.

Rispondi nella lezione interattiva

Riepilogo

Elementi essenziali della pulizia:

onUnmounted viene eseguito dopo la rimozione: rilasci qui le risorse.
Cancelli intervalli e timeout, rimuova i listener, annulli le richieste fetch e annulli le sottoscrizioni.
watch restituisce una funzione di interruzione da chiamare in onUnmounted quando necessario.
watchEffect fornisce una callback onCleanup per la pulizia a ogni esecuzione.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 42
Lezioni: 156

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «onUnmounted e pattern di cleanup» è gratuita?

Sì — il testo completo di «onUnmounted e pattern di cleanup» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «onUnmounted e pattern di cleanup»?

Cancellazione degli intervalli, rimozione degli event listener, annullamento delle richieste in onUnmounted Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «onUnmounted e pattern di cleanup»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy