Vue Academy · Lektion

effectScope för grupperade effekter

effectScope(), kör watchers och computed i en scope och använd scope.stop() för städning.

Lektion 4 av 413 steg

effectScope för grupperade effekter är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Problemet med städning

Watchers och beräknade värden som skapas utanför en komponents setup tas inte automatiskt bort. I composables som används fristående eller i kod på plugin-nivå kan Ni därför läcka effekter. effectScope löser detta genom att samla effekter så att de kan städas bort tillsammans.

Vad effectScope gör

effectScope() skapar en scope som fångar upp alla reaktiva effekter (watchers och beräknade värden) som skapas medan den körs. Senare kan Ni stoppa scopet och ta bort alla effekter på en gång.

import { effectScope } from "vue"

const scope = effectScope()

Samla effekter med run

Anropa scope.run(fn) och skapa Era watchers och beräknade värden inuti fn. Varje effekt som skapas under anropet registreras i scopet.

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))
})

Stoppa scopet

scope.stop() stoppar alla watchers och beräknade värden som skapats inuti scopet med ett enda anrop — Ni behöver inte hålla reda på varje stop-referens separat.

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

Varför detta är viktigt

Utan ett scope måste Ni spara varje watchers stop-referens och anropa dem en i taget. Med många effekter blir detta lätt fel. Ett scope omvandlar N städåtgärder till en enda.

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

Kapslade scopes

Scopes kan kapslas. Ett underordnat scope som skapas inuti ett överordnat scope stoppas automatiskt när det överordnade stoppas, så att Ni får hierarkisk städning utan extra arbete.

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

Fristående scopes

Skicka true för att skapa ett fristående scope som INTE samlas in av ett omgivande överordnat scope. Använd detta när Ni vill kunna styra livslängden oberoende.

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

Användningsfall: prenumerationer på plugin-nivå

Ett vanligt användningsfall är reaktiva prenumerationer på plugin- eller app-nivå som lever utanför en enskild komponent — till exempel synkronisering av en store med localStorage. Samla dem i ett scope som Ni stoppar när appen avslutas.

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

Bygga ett återanvändbart objekt som kan avvecklas

Ett composable kan skapa ett eget scope för att samla interna effekter och exponera en enda dispose-funktion. Den som anropar funktionen kan då städa upp allt med ett enda anrop.

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

Scopes och komponenter

Inuti en komponents setup kör Vue redan ett implicit scope som är kopplat till komponentens livscykel — därför städas komponentens watchers automatiskt bort när den avmonteras. effectScope ger Er samma möjlighet utanför komponenter.

getCurrentScope och onScopeDispose

Inuti ett scope kan Ni registrera städning med onScopeDispose(fn), som körs när scopet stoppas — motsvarigheten till onUnmounted, men för vilket scope som helst.

import { onScopeDispose } from "vue"

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

Snabbkontroll

Kontrollera att Ni har förstått effectScope.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt Er om effectScope för grupperade effekter:

effectScope() skapar ett scope som fångar upp effekter som skapas inuti det.
scope.run(fn) samlar de watchers och beräknade värden som skapas i fn.
scope.stop() tar bort alla på en gång; kapslade scopes stoppas tillsammans med sitt överordnade scope (använd true för ett fristående scope).
onScopeDispose(fn) registrerar städning som körs när scopet stoppas.
Detta är idealiskt för composables och reaktiva prenumerationer på plugin-nivå utanför komponenter.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”effectScope för grupperade effekter” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”effectScope för grupperade effekter”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”effectScope för grupperade effekter”?

effectScope(), kör watchers och computed i en scope och använd scope.stop() för städning. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”effectScope för grupperade effekter”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Avancerad reaktivitet: shallowRef och triggerRef
Composable-fabriker och parametriserade composables
State machines med XState i Vue
effectScope för grupperade effekter

← Tillbaka till Vue Academy