0Pricing
Vue Academy · Lektion

effectScope für gruppierte Effekte

effectScope(), Watcher und Computed-Werte in einem Scope ausführen und mit scope.stop() aufräumen

effectScope für gruppierte Effekte ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Bereinigungsproblem

Watcher und berechnete Werte, die außerhalb des setup einer Komponente erstellt werden, werden nicht automatisch entfernt. In eigenständig verwendeten Composables oder in Code auf Plugin-Ebene können dadurch Effekte bestehen bleiben. effectScope löst dieses Problem, indem es Effekte für eine gemeinsame Bereinigung gruppiert.

Was effectScope bewirkt

effectScope() erstellt einen Scope, der alle reaktiven Effekte – etwa Watcher und berechnete Werte – erfasst, die während seiner Ausführung erstellt werden. Später können Sie den Scope stoppen, um sie alle auf einmal zu entfernen.

import { effectScope } from "vue"

const scope = effectScope()

Effekte mit run sammeln

Rufen Sie scope.run(fn) auf und erstellen Sie Ihre Watcher und berechneten Werte innerhalb von fn. Jeder während dieses Aufrufs erstellte Effekt wird beim Scope registriert.

import { effectScope, ref, watch, computed } from "vue"

const scope = effectScope()
scope.run(() => {
  const count = ref(0)
  const doubled = computed(() => count.value * 2)
  watch(count, (v) => console.log(v))
})

Den Scope stoppen

scope.stop() stoppt alle innerhalb des Scopes erstellten Watcher und berechneten Werte mit einem einzigen Aufruf. Sie müssen daher nicht für jeden einzelnen stop-Handle den Überblick behalten.

scope.stop() // disposes all watchers and computed at once

Warum das wichtig ist

Ohne einen Scope müssen Sie den Stop-Handle jedes Watchers speichern und alle einzeln aufrufen. Bei vielen Effekten ist das fehleranfällig. Ein Scope macht aus N Bereinigungen eine einzige.

// without scope: must track each
const stop1 = watch(a, fn)
const stop2 = watch(b, fn)
// stop1(); stop2(); ... easy to forget one

Verschachtelte Scopes

Scopes können verschachtelt werden. Ein innerhalb eines übergeordneten Scopes erstellter untergeordneter Scope wird automatisch gestoppt, wenn der übergeordnete Scope stoppt. So erhalten Sie hierarchische Bereinigung ohne zusätzlichen Aufwand.

const parent = effectScope()
parent.run(() => {
  const child = effectScope() // stopped when parent stops
  child.run(() => watch(/* ... */))
})
parent.stop() // stops child too

Losgelöste Scopes

Übergeben Sie true, um einen losgelösten Scope zu erstellen, der nicht von einem umgebenden übergeordneten Scope erfasst wird. Verwenden Sie ihn, wenn Sie seine Lebensdauer unabhängig steuern möchten.

const scope = effectScope(true) // detached
// must be stopped manually; parent stop will not reach it

Anwendungsfall: Abonnements auf Plugin-Ebene

Ein typischer Anwendungsfall sind reaktive Abonnements auf Plugin- oder App-Ebene, die außerhalb einer einzelnen Komponente bestehen – etwa die Synchronisierung eines Stores mit localStorage. Gruppieren Sie sie in einem Scope, den Sie beim Beenden der App stoppen.

const appScope = effectScope()
appScope.run(() => {
  watch(store.state, persistToLocalStorage, { deep: true })
})
// on app shutdown: appScope.stop()

Ein wiederverwendbares Disposable erstellen

Ein Composable kann seinen eigenen Scope erstellen, um interne Effekte zu bündeln, und ein einzelnes dispose bereitstellen. Aufrufer bereinigen damit alles mit einem einzigen Aufruf.

export function useTracker() {
  const scope = effectScope()
  scope.run(() => {
    watch(/* ... */)
  })
  return { dispose: () => scope.stop() }
}

Scopes und Komponenten

Innerhalb des setup einer Komponente führt Vue bereits implizit einen Scope aus, der an den Lebenszyklus der Komponente gebunden ist. Deshalb werden Watcher von Komponenten beim Unmount automatisch bereinigt. effectScope bietet Ihnen dieselbe Möglichkeit außerhalb von Komponenten.

getCurrentScope und onScopeDispose

Innerhalb eines Scopes können Sie mit onScopeDispose(fn) eine Bereinigung registrieren. Sie wird ausgeführt, wenn der Scope stoppt – vergleichbar mit onUnmounted, aber für jeden beliebigen Scope.

import { onScopeDispose } from "vue"

scope.run(() => {
  const id = setInterval(tick, 1000)
  onScopeDispose(() => clearInterval(id))
})

Kurze Überprüfung

Prüfen Sie Ihr Verständnis von effectScope.

Zusammenfassung

Sie haben effectScope zum Gruppieren von Effekten kennengelernt:

  • effectScope() erstellt einen Scope, der darin erstellte Effekte erfasst.
  • scope.run(fn) sammelt die in fn erstellten Watcher und berechneten Werte.
  • scope.stop() entfernt sie alle auf einmal; verschachtelte Scopes werden zusammen mit ihrem übergeordneten Scope gestoppt (verwenden Sie true für einen losgelösten Scope).
  • onScopeDispose(fn) registriert eine Bereinigung, die beim Stoppen ausgeführt wird.
  • Ideal für Composables und reaktive Abonnements auf Plugin-Ebene außerhalb von Komponenten.

Häufig gestellte Fragen

Ist die Lektion „effectScope für gruppierte Effekte“ kostenlos?

Ja — der vollständige Text von „effectScope für gruppierte Effekte“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „effectScope für gruppierte Effekte“?

effectScope(), Watcher und Computed-Werte in einem Scope ausführen und mit scope.stop() aufräumen Du übst Vue 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 Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue 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 4 von 4.

Wie lange dauert die Lektion „effectScope für gruppierte Effekte“?

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 Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue 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

  1. Fortgeschrittene Reaktivität: shallowRef und triggerRef
  2. Composable-Factories und parametrisierte Composables
  3. Zustandsautomaten mit XState in Vue
  4. effectScope für gruppierte Effekte
← Zurück zu Vue Academy