Vue Academy · Lekcja

effectScope do grupowania efektów

effectScope(), uruchamianie watcherów i computed w zakresie oraz scope.stop() do czyszczenia.

Lekcja 4 z 413 kroki

effectScope do grupowania efektów to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Problem sprzątania

Watchery i wartości computed utworzone poza funkcją setup komponentu nie są automatycznie usuwane. W composable używanych samodzielnie lub w kodzie na poziomie wtyczki może dojść do wycieku efektów. effectScope rozwiązuje ten problem, grupując efekty w celu ich wspólnego usunięcia.

Działanie effectScope

effectScope() tworzy zakres, który przechwytuje wszystkie efekty reaktywne (watchery, computed) utworzone podczas jego działania. Następnie można zatrzymać zakres, aby usunąć je wszystkie jednocześnie.

import { effectScope } from "vue"

const scope = effectScope()

Zbieranie efektów za pomocą run

Należy wywołać scope.run(fn) i utworzyć watchery oraz computed wewnątrz funkcji fn. Każdy efekt utworzony podczas tego wywołania zostanie zarejestrowany w zakresie.

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

Zatrzymywanie zakresu

scope.stop() zatrzymuje wszystkie watchery i computed utworzone wewnątrz zakresu jednym wywołaniem — nie trzeba osobno śledzić każdego uchwytu stop.

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

Dlaczego ma to znaczenie

Bez zakresu trzeba przechwycić uchwyt zatrzymujący każdego watchera i wywoływać je jeden po drugim. W przypadku wielu efektów jest to podatne na błędy. Zakres zamienia N operacji sprzątania w jedną.

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

Zagnieżdżone zakresy

Zakresy mogą być zagnieżdżane. Zakres podrzędny utworzony wewnątrz zakresu nadrzędnego zostaje automatycznie zatrzymany wraz z nim, co zapewnia hierarchiczne sprzątanie bez dodatkowego kodu.

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

Odłączone zakresy

Przekazanie wartości true tworzy odłączony zakres, który NIE jest przechwytywany przez otaczający go zakres nadrzędny. Należy użyć tej opcji, gdy potrzebna jest niezależna kontrola czasu życia.

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

Przypadek użycia: subskrypcje na poziomie wtyczki

Częstym zastosowaniem są reaktywne subskrypcje na poziomie wtyczki lub aplikacji, działające poza pojedynczym komponentem — na przykład synchronizowanie magazynu z localStorage. Należy zgrupować je w zakresie zatrzymywanym podczas zamykania aplikacji.

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

Budowanie zasobu wielokrotnego użytku z funkcją dispose

Composable może utworzyć własny zakres, aby zebrać wewnętrzne efekty i udostępnić pojedynczą funkcję dispose. Wywołanie jej pozwala usunąć wszystko za jednym razem.

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

Zakresy a komponenty

Wewnątrz funkcji setup komponentu Vue już uruchamia niejawny zakres powiązany z cyklem życia komponentu — dlatego watchery komponentu są automatycznie sprzątane podczas odmontowania. effectScope zapewnia taką samą możliwość poza komponentami.

getCurrentScope i onScopeDispose

W zakresie można zarejestrować sprzątanie za pomocą onScopeDispose(fn), które zostanie wykonane po zatrzymaniu zakresu — analogicznie do onUnmounted, ale dla dowolnego zakresu.

import { onScopeDispose } from "vue"

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

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat effectScope.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Poznałeś effectScope do grupowania efektów:

effectScope() tworzy zakres przechwytujący efekty utworzone wewnątrz niego.
scope.run(fn) zbiera watchery i computed utworzone w funkcji fn.
scope.stop() usuwa je wszystkie jednocześnie; zagnieżdżone zakresy są zatrzymywane wraz z zakresem nadrzędnym (wartość true służy do tworzenia zakresów odłączonych).
onScopeDispose(fn) rejestruje sprzątanie wykonywane po zatrzymaniu zakresu.
Jest to idealne rozwiązanie dla composable i reaktywnych subskrypcji na poziomie wtyczek, działających poza komponentami.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „effectScope do grupowania efektów” jest bezpłatna?

Tak — pełny tekst „effectScope do grupowania efektów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „effectScope do grupowania efektów”?

effectScope(), uruchamianie watcherów i computed w zakresie oraz scope.stop() do czyszczenia. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „effectScope do grupowania efektów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Zaawansowana reaktywność: shallowRef i triggerRef
Fabryki composable i composable z parametrami
Maszyny stanów z XState w Vue
effectScope do grupowania efektów

← Powrót do Vue Academy