javascript / expert
Snippet
Defensives Speichermanagement für globale Event-Listener
In Svelte 5 ist $effect das primäre Werkzeug für Seiteneffekte. Beim Binden an globale Objekte wie 'window' oder 'document' ist die Rückgabe einer Cleanup-Funktion zwingend erforderlich, um Speicherlecks beim Unmounten der Komponente oder bei reaktiven Neuausführungen zu verhindern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
$effect(() => {const handleResize = () => {console.log('Window resized');};window.addEventListener('resize', handleResize);return () => {window.removeEventListener('resize', handleResize);};});
svelte
Erklärung
1
$effect(() => {
Registriert einen reaktiven Seiteneffekt, der nach DOM-Updates ausgeführt wird.
2
window.addEventListener('resize', handleResize);
Fügt dem globalen Window-Objekt einen Listener hinzu.
3
return () => { ... };
Kritische Bereinigungslogik: Svelte führt diese Funktion aus, bevor der Effekt erneut läuft oder die Komponente zerstört wird.