Vue Academy · Lektion

onUnmounted und Cleanup-Muster

Intervalle löschen, Event-Listener entfernen, Requests in onUnmounted abbrechen.

Lektion 4 von 413 Schritte

onUnmounted und Cleanup-Muster ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Nach sich selbst aufräumen

Wenn eine Komponente entfernt wird, läuft alles, was sie gestartet hat — Timer, Listener, Subscriptions und Netzwerkanfragen — weiter, sofern Sie es nicht anhalten. Der Hook onUnmounted ist die richtige Stelle für die Bereinigung, um Speicherlecks und Fehler zu verhindern.

Der onUnmounted-Hook

onUnmounted wird aufgerufen, nachdem die Komponente aus dem DOM entfernt wurde. Dies ist die letzte Möglichkeit, Ressourcen freizugeben.

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

Muster: Intervalle löschen

Wenn Sie in onMounted ein Intervall starten, löschen Sie es in onUnmounted. Andernfalls wird der Callback weiter ausgeführt, nachdem die Komponente verschwunden ist, und greift häufig auf nicht mehr vorhandenen Zustand zu.

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

Muster: Event-Listener entfernen

Globale Listener auf window oder document bleiben nach dem Entfernen der Komponente bestehen. Kombinieren Sie addEventListener daher immer mit removeEventListener.

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

Muster: Fetch-Anfragen abbrechen

Eine ausstehende Anfrage, die nach dem Unmounting abgeschlossen wird, kann den Zustand einer nicht mehr aktiven Komponente setzen. Verwenden Sie einen AbortController, um sie bei der Bereinigung abzubrechen.

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

Muster: Subscriptions kündigen

Subscriptions zu Stores, Sockets oder Event-Bussen müssen beendet werden. Speichern Sie die Funktion zum Kündigen und rufen Sie sie in onUnmounted auf.

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

watch gibt eine Stoppfunktion zurück

Der Aufruf von watch gibt eine Funktion zurück, die den Watcher stoppt. Watcher, die während des Setups erstellt werden, stoppen automatisch. Watcher, die später erstellt werden, etwa innerhalb eines anderen Callbacks, sollten jedoch manuell gestoppt werden.

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

Bereinigungs-Callback von watchEffect

Innerhalb von watchEffect erhalten Sie eine onCleanup-Funktion, mit der Sie vor dem nächsten Durchlauf oder beim Stoppen aufräumen können. So bleiben Ressourcen pro Durchlauf ordentlich verwaltet.

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

Warum Bereinigung wichtig ist

Wenn Sie die Bereinigung überspringen, führt das zu Speicherlecks (Ressourcen werden nie freigegeben), doppelten Listenern (mehrere Mountings sammeln sich an) und Fehlern (Callbacks greifen auf zerstörten Zustand zu). Sauberer Code räumt immer auf, was er eingerichtet hat.

Composables machen das automatisch

Gut geschriebene Composables registrieren ihre eigene Bereinigung in onUnmounted. Deshalb entfernen VueUse-Composables wie useEventListener den Listener für Sie — die Bereinigung ist bereits integriert.

Checkliste für die Bereinigung

setInterval/setTimeout -> löschen Sie sie.
addEventListener -> entfernen Sie ihn.
fetch -> mit AbortController abbrechen.
Subscriptions -> die Funktion zum Kündigen aufrufen.
Manuelle Watcher -> die zurückgegebene Stoppfunktion aufrufen.

Kurzer Test

Testen Sie Ihr Wissen über die Bereinigung.

Beantworte es in der interaktiven Lektion

Zusammenfassung

Das Wichtigste zur Bereinigung:

onUnmounted wird nach dem Entfernen ausgeführt — geben Sie hier Ressourcen frei.
Intervalle und Timeouts löschen, Listener entfernen, Fetch-Anfragen abbrechen und Subscriptions kündigen.
watch gibt eine Stoppfunktion zurück, die bei Bedarf in onUnmounted aufgerufen wird.
watchEffect stellt einen onCleanup-Callback für die Bereinigung pro Durchlauf bereit.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 42
Lektionen: 156

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „onUnmounted und Cleanup-Muster“ kostenlos?

Ja — der vollständige Text von „onUnmounted und Cleanup-Muster“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „onUnmounted und Cleanup-Muster“?

Intervalle löschen, Event-Listener entfernen, Requests in onUnmounted abbrechen. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „onUnmounted und Cleanup-Muster“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Vue Academy