onMount: Ausführung nach dem Rendern
Führen Sie Code aus, nachdem die Komponente zum DOM hinzugefügt wurde.
onMount: Ausführung nach dem Rendern ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Zweck von onMount
onMount wird ausgeführt, nachdem die Komponente zum DOM hinzugefügt wurde. Es eignet sich ideal, um asynchrone Aufgaben zu starten oder auf Referenzen zuzugreifen.
Importieren
Importieren Sie es am Anfang Ihres Skripts aus svelte.
<script>
import { onMount } from "svelte";
</script>Grundlegende Verwendung
Übergeben Sie eine Funktion, die beim Mounten einmal ausgeführt wird.
onMount(() => {
console.log("mounted");
});Asynchrone Vorgänge
Sie können darin async/await verwenden oder ein Promise zurückgeben.
onMount(async () => {
data = await fetch("/api").then(r => r.json());
});Auf Elemente zugreifen
Kombinieren Sie dies mit bind:this, um das DOM direkt nach dem Mounten zu bearbeiten.
onMount(() => inputEl.focus());Bereinigungsfunktion
Geben Sie aus onMount eine Funktion zurück, um beim Unmounten der Komponente aufzuräumen.
onMount(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
});Server und Browser
onMount wird während SSR nicht ausgeführt. Verwenden Sie es für browserspezifischen Code wie die Einrichtung von Canvas oder WebGL.
Mehrere onMount-Aufrufe
Sie können onMount in einer Komponente mehrfach aufrufen. Die Aufrufe werden in der Reihenfolge ihrer Deklaration ausgeführt.
Abonnements
Abonnieren Sie hier externe Quellen und beenden Sie das Abonnement in der zurückgegebenen Bereinigungsfunktion.
Aufwendige Arbeit vermeiden
Verschieben Sie nicht kritische Aufgaben oder verwenden Sie requestIdleCallback, um das erste Rendern nicht zu blockieren.
Unterschied zu beforeUpdate
onMount wird genau einmal ausgeführt, beforeUpdate dagegen vor jeder reaktiven Aktualisierung.
Schnelltest
Wie bereinigen Sie ein in onMount gestartetes Intervall?
Zusammenfassung
onMount wird einmal nach dem Mounten ausgeführt. Geben Sie eine Funktion für die Bereinigung zurück. Auf dem Server wird es nie ausgeführt.
Häufig gestellte Fragen
Ist die Lektion „onMount: Ausführung nach dem Rendern“ kostenlos?
Ja — der vollständige Text von „onMount: Ausführung nach dem Rendern“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „onMount: Ausführung nach dem Rendern“?
Führen Sie Code aus, nachdem die Komponente zum DOM hinzugefügt wurde. Du übst Sveltejs 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 Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs 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 1 von 4.
Wie lange dauert die Lektion „onMount: Ausführung nach dem Rendern“?
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 Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs 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
- onMount: Ausführung nach dem Rendern
- onDestroy: Aufräumen
- beforeUpdate und afterUpdate
- tick(): Auf DOM-Aktualisierungen warten