Vue Academy · leksjon

effectScope for grupperte effekter

effectScope(), kjøring av watchers og computed i et scope og scope.stop() for opprydding.

Leksjon 4 av 413 trinn

effectScope for grupperte effekter er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Oppryddingsproblemet

Watchere og computed-verdier som opprettes utenfor en komponents setup, blir ikke automatisk avhendet. I composables som brukes frittstående, eller i kode på plugin-nivå, kan De lekke effekter. effectScope løser dette ved å gruppere effekter slik at de kan ryddes opp i samlet.

Hva effectScope gjør

effectScope() oppretter et scope som fanger opp alle reaktive effekter (watchere og computed-verdier) som opprettes mens det kjører. Senere kan De stoppe scopet for å avhende alle samtidig.

import { effectScope } from "vue"

const scope = effectScope()

Samle effekter med run

Kall scope.run(fn), og opprett watcherene og de computed-verdiene inne i fn. Alle effekter som opprettes under dette kallet, registreres 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))
})

Stoppe scopet

scope.stop() stopper alle watchere og computed-verdier som er opprettet inne i scopet, med ett enkelt kall – det er ikke nødvendig å følge hvert enkelt stop-håndtak separat.

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

Hvorfor dette er viktig

Uten et scope må De lagre stop-håndtaket for hver watcher og kalle dem ett etter ett. Med mange effekter er dette utsatt for feil. Et scope gjør N oppryddinger om til én.

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

Nestede scope

Scope kan nestes. Et child-scope som opprettes inne i et parent-scope, stoppes automatisk når parent-scope stopper, slik at De får hierarkisk opprydding uten ekstra arbeid.

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

Frikoblede scope

Send inn true for å opprette et frikoblet scope som IKKE samles inn av et omsluttende parent-scope. Bruk dette når De ønsker uavhengig kontroll over levetiden.

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

Brukstilfelle: Abonnementer på plugin-nivå

Et vanlig bruksområde er reaktive abonnementer på plugin- eller appnivå som lever utenfor én enkelt komponent – for eksempel synkronisering av en store med localStorage. Grupper dem i et scope som De stopper når appen avsluttes.

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

Bygge en gjenbrukbar ressurs med opprydding

En composable kan opprette sitt eget scope for å samle interne effekter og eksponere én enkelt dispose-funksjon. Den som kaller composable-funksjonen, rydder opp i alt med ett kall.

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

Scope og komponenter

Inne i en komponents setup kjører Vue allerede et implisitt scope som er knyttet til komponentens livssyklus – derfor ryddes komponentens watchere automatisk opp ved avmontering. effectScope gir Dem den samme muligheten utenfor komponenter.

getCurrentScope og onScopeDispose

Inne i et scope kan De registrere opprydding med onScopeDispose(fn). Den kjøres når scopet stoppes – på samme måte som onUnmounted, men for alle typer scope.

import { onScopeDispose } from "vue"

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

Kort sjekk

Kontroller forståelsen av effectScope.

Besvar den i den interaktive leksjonen

Oppsummering

De har lært om effectScope for å gruppere effekter:

effectScope() oppretter et scope som fanger opp effekter som opprettes inne i det.
scope.run(fn) samler watcherene og de computed-verdiene som opprettes i fn.
scope.stop() avhender alle samtidig. Nestede scope stoppes sammen med parent-scope (bruk true for et frikoblet scope).
onScopeDispose(fn) registrerer opprydding som kjøres når scopet stoppes.
Dette er ideelt for composables og reaktive abonnementer på plugin-nivå utenfor komponenter.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 42
Leksjoner: 156

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «effectScope for grupperte effekter» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «effectScope for grupperte effekter», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «effectScope for grupperte effekter»?

effectScope(), kjøring av watchers og computed i et scope og scope.stop() for opprydding. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Vue Academy?

Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «effectScope for grupperte effekter»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?

Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Avansert reaktivitet: shallowRef og triggerRef
Composable-fabrikker og parametriserte composables
State machines med XState i Vue
effectScope for grupperte effekter

← Tilbake til Vue Academy