javascript / expert
Snippet
Isolierte EffectScope-Teardown-Überprüfung in Unittests
Dieses Beispiel veranschaulicht das Unittesting von losgelösten reaktiven Vue-Scopes unter Verwendung von effectScope. Durch das Ausführen von reaktiven Seiteneffekten innerhalb eines Scopes und den Aufruf von scope.stop() können Entwickler überprüfen, ob Observer und Watcher korrekt bereinigt werden, um Speicherlecks zu verhindern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { ref, watch, effectScope } from 'vue';import { expect, test } from 'vitest';test('teardown stops reactive subscriptions within effect scope', () => {const scope = effectScope(true);const count = ref(0);let sideEffectCount = 0;scope.run(() => {watch(count, (val) => {sideEffectCount = val * 2;});});count.value = 5;expect(sideEffectCount).toBe(10);scope.stop();count.value = 20;expect(sideEffectCount).toBe(10);});
vue
Erklärung
1
const scope = effectScope(true);
Instanziiert einen losgelösten reaktiven Vue-Scope-Container unabhängig von aktiven Komponenteninstanzen.
2
scope.run(() => {
Führt Callback-Funktionen aus und erfasst dabei automatisch alle verschachtelten reaktiven Watcher und Computed Properties.
3
watch(count, (val) => { sideEffectCount = val * 2; });
Registriert einen reaktiven Abhängigkeits-Watcher innerhalb der explizit isolierten Scope-Grenze.
4
expect(sideEffectCount).toBe(10);
Überprüft, dass reaktive Watcher-Aktualisierungen vor dem Verwerfen des Scopes erfolgreich ausgelöst werden.
5
scope.stop();
Entsorgt gleichzeitig alle innerhalb des Effect-Scopes registrierten untergeordneten Abonnements und Effekte.
6
expect(sideEffectCount).toBe(10);
Bestätigt, dass Zustandsmutationen nach dem Stoppen des Scopes keine getrennten Watcher-Callbacks mehr auslösen.