0Pricing
Vue Academy · Lezione

effectScope per raggruppare gli effetti

effectScope(), esecuzione di watcher e computed in uno scope, scope.stop() per la pulizia.

effectScope per raggruppare gli effetti è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Il problema della pulizia

Watcher e valori computed creati all’esterno del setup di un componente non vengono eliminati automaticamente. Nei composable usati autonomamente o nel codice a livello di plugin, è possibile lasciare effetti attivi e causare perdite di memoria. effectScope risolve il problema raggruppando gli effetti per consentirne la pulizia collettiva.

Che cosa fa effectScope

effectScope() crea un ambito che acquisisce tutti gli effetti reattivi (watcher, computed) creati durante la sua esecuzione. In seguito è possibile arrestare l’ambito per eliminarli tutti in una volta.

import { effectScope } from "vue"

const scope = effectScope()

Raccogliere gli effetti con run

Chiami scope.run(fn) e crei i watcher e i computed all’interno di fn. Ogni effetto creato durante quella chiamata viene registrato nell’ambito.

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

Arrestare l’ambito

scope.stop() arresta con una sola chiamata ogni watcher e computed creato all’interno dell’ambito — non è necessario tenere traccia separatamente di ogni handle stop.

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

Perché è importante

Senza un ambito deve acquisire l’handle di arresto di ogni watcher e chiamarli uno alla volta. Quando gli effetti sono numerosi, questo approccio è soggetto a errori. Un ambito trasforma N operazioni di pulizia in una sola.

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

Ambiti annidati

Gli ambiti possono essere annidati. Un ambito figlio creato all’interno di un genitore viene arrestato automaticamente quando si arresta il genitore, offrendo una pulizia gerarchica senza ulteriore lavoro.

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

Ambiti separati

Passi true per creare un ambito separato che NON viene raccolto dall’ambito genitore circostante. Lo utilizzi quando desidera controllare indipendentemente il ciclo di vita.

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

Caso d’uso: sottoscrizioni a livello di plugin

Un caso d’uso comune riguarda le sottoscrizioni reattive a livello di plugin o applicazione, che vivono al di fuori di un singolo componente — ad esempio la sincronizzazione di uno store con localStorage. Le raggruppi in un ambito da arrestare durante la dismissione dell’applicazione.

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

Creare una risorsa riutilizzabile eliminabile

Un composable può creare un proprio ambito per raggruppare gli effetti interni ed esporre una singola operazione dispose. I chiamanti possono eliminare tutto con una sola chiamata.

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

Ambiti e componenti

All’interno del setup di un componente, Vue esegue già un ambito implicito legato al ciclo di vita del componente — per questo i watcher del componente vengono eliminati automaticamente al suo smontaggio. effectScope offre la stessa possibilità all’esterno dei componenti.

getCurrentScope e onScopeDispose

All’interno di un ambito è possibile registrare la pulizia con onScopeDispose(fn), che viene eseguita quando l’ambito si arresta — è analoga a onUnmounted, ma funziona con qualsiasi ambito.

import { onScopeDispose } from "vue"

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

Verifica rapida

Verifichi la Sua comprensione di effectScope.

Riepilogo

Ha imparato a usare effectScope per raggruppare gli effetti:

  • effectScope() crea un ambito che acquisisce gli effetti creati al suo interno.
  • scope.run(fn) raccoglie i watcher e i computed creati in fn.
  • scope.stop() li elimina tutti in una volta; gli ambiti annidati vengono arrestati insieme al genitore (utilizzi true per gli ambiti separati).
  • onScopeDispose(fn) registra una pulizia da eseguire all’arresto.
  • È ideale per i composable e per le sottoscrizioni reattive a livello di plugin, al di fuori dei componenti.

Domande Frequenti

La lezione «effectScope per raggruppare gli effetti» è gratuita?

Sì — il testo completo di «effectScope per raggruppare gli effetti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «effectScope per raggruppare gli effetti»?

effectScope(), esecuzione di watcher e computed in uno scope, scope.stop() per la pulizia. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «effectScope per raggruppare gli effetti»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Reattività avanzata: shallowRef e triggerRef
  2. Factory di composable e composable parametrizzati
  3. Macchine a stati con XState in Vue
  4. effectScope per raggruppare gli effetti
← Torna a Vue Academy