Vue Academy · Lektion

effectScope til grupperede effekter

effectScope(), kørsel af watchers og computed i et scope samt scope.stop() til oprydning

Lektion 4 af 413 trin

effectScope til grupperede effekter er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.

Problemet med oprydning

Overvågere og beregnede værdier, der oprettes uden for en komponents setup, bliver ikke automatisk afviklet. I composable-funktioner, der bruges selvstændigt, eller i kode på pluginniveau kan du derfor lække effekter. effectScope løser dette ved at samle effekter, så de kan ryddes op i samlet.

Hvad effectScope gør

effectScope() opretter et omfang, der opfanger alle reaktive effekter (overvågere og beregnede værdier), som oprettes, mens det kører. Senere stopper du omfanget for at afvikle dem alle på én gang.

import { effectScope } from "vue"

const scope = effectScope()

Samling af effekter med run

Kald scope.run(fn), og opret dine overvågere og beregnede værdier inde i fn. Alle effekter, der oprettes under det kald, registreres i omfanget.

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

Stop omfanget

scope.stop() stopper alle overvågere og beregnede værdier, der er oprettet inde i omfanget, med ét enkelt kald – du behøver ikke holde styr på hver enkelt stop-reference.

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

Hvorfor det er vigtigt

Uden et omfang skal du gemme stopreferencen for hver overvåger og kalde dem én efter én. Det er fejlbehæftet, når der er mange effekter. Et omfang forvandler N oprydninger til én.

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

Indlejrede omfang

Omfang kan indlejres. Et underomfang, der oprettes inde i et overordnet omfang, stoppes automatisk, når det overordnede omfang stoppes, så du får hierarkisk oprydning uden ekstra arbejde.

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

Frakoblede omfang

Send true for at oprette et frakoblet omfang, som IKKE samles af et omgivende overordnet omfang. Brug det, når du vil styre levetiden uafhængigt.

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

Anvendelse: abonnementer på pluginniveau

En almindelig anvendelse er reaktive abonnementer på plugin- eller appniveau, som lever uden for en enkelt komponent – f.eks. synkronisering af et tilstandslager med localStorage. Saml dem i et omfang, som du stopper, når appen lukkes ned.

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

Opbygning af en genanvendelig ressource, der kan frigives

En composable-funktion kan oprette sit eget omfang for at samle interne effekter og eksponere én enkelt dispose-funktion. Kaldende kode kan rydde alt op med ét kald.

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

Omfang og komponenter

Inde i en komponents setup kører Vue allerede et implicit omfang, der er knyttet til komponentens livscyklus – derfor ryddes komponentens overvågere automatisk op ved afmontering. effectScope giver dig den samme mulighed uden for komponenter.

getCurrentScope og onScopeDispose

Inden for et omfang kan du registrere oprydning med onScopeDispose(fn), som køres, når omfanget stoppes – tilsvarende onUnmounted, men for alle omfang.

import { onScopeDispose } from "vue"

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

Hurtig test

Test din forståelse af effectScope.

Besvar den i den interaktive lektion

Opsamling

Du har lært om effectScope til at samle effekter:

effectScope() opretter et omfang, der opfanger effekter, som oprettes inde i det.
scope.run(fn) samler de overvågere og beregnede værdier, der oprettes i fn.
scope.stop() afvikler dem alle på én gang; indlejrede omfang stoppes sammen med deres overordnede omfang (brug true til frakoblede omfang).
onScopeDispose(fn) registrerer oprydning, der køres ved stop.
Det er ideelt til composable-funktioner og reaktive abonnementer på pluginniveau uden for komponenter.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “effectScope til grupperede effekter” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “effectScope til grupperede effekter”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “effectScope til grupperede effekter”?

effectScope(), kørsel af watchers og computed i et scope samt scope.stop() til oprydning Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vue Academy?

Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “effectScope til grupperede effekter”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vue Academy-lektion?

Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Avanceret reaktivitet: shallowRef og triggerRef
Composable-fabrikker og parametriserede composables
State machines med XState i Vue
effectScope til grupperede effekter

← Tilbage til Vue Academy