So verwenden Sie EffectScope in Vue3

Vue Version 3.2 führt eine neue Effektbereich-API ein. Verwenden Sie effectScope, um einen Effektbereich zu erstellen, der die darin erstellten reaktiven Nebenwirkungen (d. h. berechnete Eigenschaften und Listener) erfassen kann, sodass die erfassten Nebenwirkungen gemeinsam verarbeitet werden können. Die Methode getCurrentScope kann verwendet werden, um den aktuell aktiven Effektbereich abzurufen. Um eine Handler-Rückruffunktion im aktuell aktiven Effektbereich zu registrieren, verwenden Sie onScopeDispose. Diese Rückruffunktion wird aufgerufen, wenn der zugehörige Effektbereich gestoppt wird.

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

Im Vue-Setup wird die Antwort zu Beginn der Initialisierung erfasst. Wenn die Instanz deinstalliert wird, wird die Verfolgung der Antwort automatisch aufgehoben, was eine sehr praktische Funktion ist.

Dies wird jedoch sehr problematisch, wenn wir es außerhalb der Komponente verwenden oder ein eigenständiges Paket schreiben. Wie kann ich die reaktive Abhängigkeit von der Berechnung und Überwachung in separaten Dateien entfernen?

Beispielcode, Referenzlink

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)

Im obigen Code haben wir insgesamt drei reaktionsfähige Abhängigkeiten von „Computed & Watch“ geschrieben und das stopHandle dieser reaktionsfähigen Abhängigkeiten in einem Array gespeichert, was bedeutet, dass wir dieses Array verwalten müssen dass Sie bei Bedarf in der Zukunft alle Antworten wie folgt direkt stoppen können:

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

Besonders wenn es um einige komplexe kombinierte Funktionscodes geht, ist es sehr mühsam, alle reaktiven Abhängigkeiten manuell zu erfassen. Wenn Sie keinen Zugriff auf reaktive Abhängigkeiten haben, die in zusammengesetzten Funktionen erstellt wurden, kann das Sammeln dieser Abhängigkeiten leicht vergessen werden, was zu Speicherverlusten und unerwartetem Verhalten führen kann.

Diese Funktion ist ein Versuch, die auf setup() reagierende Abhängigkeitserfassungs- und -verarbeitungsfunktion der Komponente in eine allgemeinere API zu abstrahieren, die außerhalb des Komponentenmodells wiederverwendet werden kann.

Es bietet auch die Möglichkeit, „getrennte“ Effekte aus dem setup()-Bereich einer Komponente oder einem benutzerdefinierten Bereich zu erstellen.

Welches Problem löst diese Funktion?

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

Ich habe eine zusammengesetzte Funktion, die die Funktionalität zwischen mehreren Komponenten teilt. Das Problem besteht darin, dass die erste Komponente namens Komponente1 die reaktive Abhängigkeit von Foo nicht mehr verwendet. Da sich der anhaltende Effekt auf die globale Variable foo auf Aufrufe anderer Komponenten auswirkt, muss dieser Effekt gestoppt werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie EffectScope in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!