Vue Academy · Oppitunti

effectScope ryhmitellyille efekteille

effectScope(), watcherien ja computed-arvojen suorittaminen scopessa sekä scope.stop() puhdistusta varten

Oppitunti 4/413 vaihetta

effectScope ryhmitellyille efekteille on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Siivousongelma

Komponentin setup-funktion ulkopuolella luotuja watch- ja computed-arvoja ei poisteta automaattisesti. Erillään käytettävissä composableissa tai liitännäistason koodissa efektit voivat jäädä vuotamaan. effectScope ratkaisee tämän ryhmittelemällä efektit yhteistä siivousta varten.

Mitä effectScope tekee

effectScope() luo scopen, joka kaappaa kaikki sen suorittamisen aikana luodut reaktiiviset efektit, kuten watch- ja computed-arvot. Myöhemmin voitte pysäyttää scopen ja poistaa ne kaikki kerralla.

import { effectScope } from "vue"

const scope = effectScope()

Efektien kerääminen run-funktiolla

Kutsukaa scope.run(fn) ja luokaa watch- ja computed-arvot fn-funktion sisällä. Jokainen kutsun aikana luotu efekti rekisteröidään scopeen.

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

Scopen pysäyttäminen

scope.stop() pysäyttää kaikki scopen sisällä luodut watch- ja computed-arvot yhdellä kutsulla – jokaista stop-kahvaa ei tarvitse seurata erikseen.

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

Miksi tällä on merkitystä

Ilman scopea teidän on otettava talteen jokaisen watchin pysäytyskahva ja kutsuttava niitä yksi kerrallaan. Monien efektien kanssa tämä altistaa virheille. Scope muuttaa N siivoustoimintoa yhdeksi.

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

Sisäkkäiset scopet

Scopet voivat olla sisäkkäisiä. Emoscopen sisällä luotu lapsiscope pysäytetään automaattisesti, kun emoscope pysäytetään, joten saatte hierarkkisen siivouksen automaattisesti.

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

Irrotetut scopet

Välittäkää true, kun haluatte luoda irrotetun scopen, jota ympäröivä emoscope EI kerää. Käyttäkää sitä, kun haluatte hallita sen elinkaarta itsenäisesti.

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

Käyttötapaus: liitännäistason tilaukset

Yleinen käyttötapaus ovat liitännäis- tai sovellustason reaktiiviset tilaukset, jotka elävät yhden komponentin ulkopuolella – esimerkiksi storen synkronointi localStorageen. Ryhmitelkää ne scopeen, jonka pysäytätte sovelluksen purkamisen yhteydessä.

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

Uudelleenkäytettävän vapautettavan rakenteen rakentaminen

Composable voi luoda oman scopen sisäisten efektien ryhmittelyä varten ja tarjota yhden dispose-funktion. Kutsujat voivat siivota kaiken yhdellä kutsulla.

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

Scopet ja komponentit

Komponentin setup-funktion sisällä Vue käyttää jo komponentin elinkaareen sidottua implisiittistä scopea – siksi komponentin watch-arvot siivotaan automaattisesti irrotuksen yhteydessä. effectScope tarjoaa saman mahdollisuuden komponenttien ulkopuolella.

getCurrentScope ja onScopeDispose

Scopen sisällä voitte rekisteröidä siivouksen komennolla onScopeDispose(fn). Se suoritetaan, kun scope pysäytetään – toiminta vastaa onUnmounted-funktiota, mutta toimii missä tahansa scopessa.

import { onScopeDispose } from "vue"

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

Pikatarkistus

Tarkistakaa, miten hyvin ymmärrätte effectScopen.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte effectScopen efektien ryhmittelyä varten:

effectScope() luo scopen, joka kaappaa sen sisällä luodut efektit.
scope.run(fn) kerää fn-funktiossa luodut watch- ja computed-arvot.
scope.stop() poistaa ne kaikki kerralla; sisäkkäiset scopet pysäytetään emoscopen mukana (käyttäkää true-arvoa irrotettuun scopeen).
onScopeDispose(fn) rekisteröi pysäytettäessä suoritettavan siivouksen.
Se sopii erinomaisesti composableihin ja komponenttien ulkopuolisiin liitännäistason reaktiivisiin tilauksiin.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”effectScope ryhmitellyille efekteille” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “effectScope ryhmitellyille efekteille”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”effectScope ryhmitellyille efekteille”?

effectScope(), watcherien ja computed-arvojen suorittaminen scopessa sekä scope.stop() puhdistusta varten Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”effectScope ryhmitellyille efekteille”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Edistynyt reaktiivisuus: shallowRef ja triggerRef
Composable-tehtaat ja parametroidut composablet
Tilakoneet XStatella Vuessa
effectScope ryhmitellyille efekteille

← Takaisin: Vue Academy