Comment utiliser EffectScope dans Vue3

Vue version 3.2 introduit une nouvelle API de portée d'effet. Utilisez effectScope pour créer une portée d'effet, qui peut capturer les effets secondaires réactifs (c'est-à-dire les propriétés calculées et les écouteurs) qui y sont créés, afin que les effets secondaires capturés puissent être traités ensemble. . La méthode getCurrentScope peut être utilisée pour obtenir la portée de l'effet actuellement actif. Pour enregistrer une fonction de rappel de gestionnaire dans la portée d'effet actuellement active, utilisez onScopeDispose. Cette fonction de rappel est appelée lorsque la portée de l'effet associé est arrêtée.

const scope = effectScope()

scope.run(() => {
  const doubled = computed(() => counter.value * 2)

  watch(doubled, () => console.log(doubled.value))

  watchEffect(() => console.log('Count: ', doubled.value))
})

// 处理掉当前作用域内的所有 effect
scope.stop()

Dans la configuration de Vue, la réponse sera collectée au début de l'initialisation. Lorsque l'instance est désinstallée, la réponse sera automatiquement non suivie, ce qui est une fonctionnalité très pratique.

Cependant, cela peut devenir très gênant lorsque nous l'utilisons en dehors du composant ou que nous écrivons un package séparé. Comment puis-je supprimer la dépendance réactive sur le calcul et regarder dans des fichiers séparés ?

Exemple de code, lien de référence

const disposables = []

const counter = ref(0)
const doubled = computed(() => counter.value * 2)

disposables.push(() => stop(doubled.effect))

const stopWatch2 = watchEffect(() => {
  console.log(`counter: ${counter.value}`)
})

disposables.push(stopWatch2)

const stopWatch3 = watch(doubled, () => {
  console.log(doubled.value)
})

disposables.push(stopWatch3)

Dans le code ci-dessus, nous avons écrit un total de trois dépendances réactives de calculated & watch, et stocké le stopHandle de ces dépendances réactives dans un tableau, cela signifie que nous devons maintenir ce tableau, de sorte qu'en cas de besoin à l'avenir, nous puissions directement arrêter toutes les réponses comme suit :

disposables.forEach((f) => f())
disposables = []

Surtout lorsqu'il s'agit de certains complexes Lors de la combinaison manuelle du code de fonction collecter toutes les dépendances réactives peut être fastidieux. Si vous n'avez pas accès aux dépendances réactives créées dans les fonctions composées, leur collecte peut facilement être oubliée, ce qui peut entraîner des fuites de mémoire et un comportement inattendu.

Cette fonctionnalité est une tentative d'abstraire la fonction de collecte et de traitement des dépendances réactives setup() du composant dans une API plus générale qui peut être réutilisée en dehors du modèle de composant.

Il offre également la possibilité de créer des effets "détachés" à partir de la portée setup() du composant ou d'une portée définie par l'utilisateur.

Quel problème cette fonction résout-elle ?

// global shared reactive state
let foo

function useFoo() {
  if (!foo) { // lazy initialization
      foo = ref()
      watch(foo, ...) // <- this is stopped when component that created it is unmounted
      // make some http calls etc
  }
  return foo
}

component1 = {
    setup() {
        useFoo() // lazily initialize
    }
}

component2 = {
    setup() {
        useFoo() // lazily initialize
    }
}

J'ai une fonction composée qui partage des fonctionnalités entre plusieurs composants, le problème est lorsque le premier composant appelé composant1 cesse d'utiliser la dépendance réactive. Étant donné que l'influence continue sur la variable globale foo affecte les appels vers d'autres composants, cette influence doit être stoppée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!