0Pricing
Vue Academy · Leçon

effectScope pour regrouper les effets

effectScope(), exécution des observateurs et valeurs calculées dans une portée et scope.stop() pour le nettoyage

effectScope pour regrouper les effets est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Le problème du nettoyage

Les observateurs et les valeurs calculées créés en dehors de la configuration d’un composant ne sont pas automatiquement supprimés. Dans les composables utilisés de manière autonome ou dans le code au niveau d’un module d’extension, vous pouvez laisser des effets actifs. effectScope résout ce problème en regroupant les effets afin de les nettoyer collectivement.

Rôle de effectScope

effectScope() crée une portée qui capture tous les effets réactifs (observateurs, valeurs calculées) créés pendant son exécution. Vous pouvez ensuite arrêter la portée pour tous les supprimer en une seule fois.

import { effectScope } from "vue"

const scope = effectScope()

Collecter les effets avec run

Appelez scope.run(fn) et créez vos observateurs et vos valeurs calculées à l’intérieur de fn. Chaque effet créé pendant cet appel est enregistré dans la portée.

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

Arrêter la portée

scope.stop() arrête en un seul appel chaque observateur et chaque valeur calculée créés dans la portée — vous n’avez pas besoin de suivre individuellement chaque gestionnaire stop.

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

Pourquoi est-ce important ?

Sans portée, vous devez conserver le gestionnaire d’arrêt de chaque observateur et les appeler un par un. Avec de nombreux effets, cette approche est source d’erreurs. Une portée transforme N nettoyages en un seul.

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

Portées imbriquées

Les portées peuvent être imbriquées. Une portée child créée à l’intérieur d’une portée parent est automatiquement arrêtée lorsque la portée parent s’arrête : vous bénéficiez ainsi gratuitement d’un nettoyage hiérarchique.

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

Portées détachées

Transmettez true pour créer une portée détachée qui est NOT collectée par une portée parent environnante. Utilisez-la lorsque vous voulez contrôler indépendamment sa durée de vie.

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

Cas d’utilisation : abonnements au niveau d’un module d’extension

Un cas d’utilisation courant concerne les abonnements réactifs au niveau d’un module d’extension ou de l’application, qui vivent en dehors de tout composant donné — par exemple, synchroniser un magasin avec localStorage. Regroupez-les dans une portée que vous arrêtez lors de l’arrêt de l’application.

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

Construire un objet réutilisable et supprimable

Un composable peut créer sa propre portée pour regrouper ses effets internes et exposer un unique dispose. Les appelants nettoient tout en un seul appel.

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

Portées et composants

À l’intérieur de la configuration setup d’un composant, Vue exécute déjà une portée implicite liée au cycle de vie du composant — c’est pourquoi les observateurs du composant sont automatiquement nettoyés lors du démontage. effectScope vous offre le même pouvoir en dehors des composants.

getCurrentScope et onScopeDispose

Dans une portée, vous pouvez enregistrer un nettoyage avec onScopeDispose(fn), qui s’exécute lorsque la portée s’arrête — de manière analogue à onUnmounted, mais pour n’importe quelle portée.

import { onScopeDispose } from "vue"

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

Vérification rapide

Vérifiez votre compréhension de effectScope.

Récapitulatif

Vous avez découvert effectScope pour regrouper les effets :

  • effectScope() crée une portée qui capture les effets créés à l’intérieur.
  • scope.run(fn) collecte les observateurs et les valeurs calculées créés dans fn.
  • scope.stop() les supprime tous en une seule fois ; les portées imbriquées s’arrêtent avec leur portée parent (utilisez true pour une portée détachée).
  • onScopeDispose(fn) enregistre un nettoyage qui s’exécute à l’arrêt.
  • Cette approche est idéale pour les composables et les abonnements réactifs au niveau d’un module d’extension, en dehors des composants.

Questions Fréquemment Posées

La leçon « effectScope pour regrouper les effets » est-elle gratuite ?

Oui — le texte complet de « effectScope pour regrouper les effets » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « effectScope pour regrouper les effets » ?

effectScope(), exécution des observateurs et valeurs calculées dans une portée et scope.stop() pour le nettoyage Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « effectScope pour regrouper les effets » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Réactivité avancée : shallowRef et triggerRef
  2. Fabriques de composables et composables paramétrés
  3. Machines à états avec XState dans Vue
  4. effectScope pour regrouper les effets
← Retour à Vue Academy