javascript / expert
Snippet
Manuelle Effect-Scopes für dynamische Module
Experten nutzen effectScope, um den Lebenszyklus reaktiver Effekte außerhalb des Standard-Komponentenbaums zu verwalten. Dies ist entscheidend für die Erstellung von Plugins oder externen Logikmodulen, bei denen mehrere Watcher oder Computed-Properties gleichzeitig bereinigt werden müssen, um Speicherlecks 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 counter = ref(0);scope.run(() => {watch(counter, (val) => console.log('Changed:', val));});// Later, to clean up all reactivity inside the scope:scope.stop();
vue
Erklärung
1
const scope = effectScope();
Erstellt einen isolierten Scope-Container für reaktive Effekte.
2
scope.run(() => { ... });
Führt Logik aus, wobei alle erzeugten Reaktivitäten (Watcher, Computed) von diesem Scope erfasst werden.
3
scope.stop();
Bereinigt alle innerhalb des Scopes erfassten Effekte in einer einzigen Operation.