javascript / expert
Snippet
Manuelle Reaktivitäts-Entsorgung mit EffectScope
EffectScope ist eine fortgeschrittene API zum Gruppieren reaktiver Effekte, damit diese gemeinsam entsorgt werden können. Dies ist entscheidend, um Memory Leaks in manueller Logik außerhalb von Komponenten-Lebenszyklen zu vermeiden.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
import { effectScope, watch, ref } from 'vue';const scope = effectScope();const count = ref(0);scope.run(() => {watch(count, (val) => console.log(`Count is: ${val}`));});// Later, dispose of all effects inside the scope at oncescope.stop();
vue
Erklärung
1
const scope = effectScope();
Erstellt ein Effect-Scope-Objekt, das reaktive Effekte wie Watcher und Computed Properties erfassen kann.
2
scope.run(() => { ... });
Führt eine Funktion aus, bei der alle erstellten Effekte automatisch diesem Scope zugeordnet werden.
3
scope.stop();
Entsorgt rekursiv alle im Scope erfassten Effekte und bereinigt Speicher sowie Listener.