Eine kurze Analyse der Verwendung von watchEffect in Vue3

Vorwort

Jeder sollte mit der Watch-API in vue2 vertraut sein. Es gibt eine $watch-Methode in der Vue-Instanz in vue2 und eine Watch-Option in sfc (Sign File Component). Damit lässt sich bei einer Änderung einer Eigenschaft das gewünschte Verhalten ausführen. Zum Beispiel:

• Bei einer ID-Änderung werden die neuen Daten aus der Datenbank abgerufen.
• Führen Sie eine Animation aus, wenn sich eine Eigenschaft ändert.
• Wenn sich die Suchbedingungen ändern, aktualisieren Sie die abgefragten Daten.
  

Aber zusätzlich zur Watch-API hat vue3 auch eine WatchEffect-API hinzugefügt. Schauen wir uns ihre Verwendung an.

Wir erfassen eine Abhängigkeit von der Benutzer-ID und führen dann den Rückruf watchEffect aus, wenn sich die Benutzer-ID ändert.

// Beispiel inspiriert von der [Dokumentation](https://v3.vuejs.org/api/computed-watch-api.html#watcheffect)

importiere { watchEffect, ref } von 'vue'
aufstellen () {
    const Benutzer-ID = ref(0)
    watchEffect(() => console.log(Benutzer-ID))
    setzeTimeout(() => {
      Benutzer-ID.Wert = 1
    }, 1000)

    /*
      * PROTOKOLL
      * 0 
      * 1
    */

    zurückkehren {
      Benutzer-ID
    }
 }

Worin besteht der Unterschied zur Uhr?

• Zunächst können wir aus dem Beispielcode erkennen, dass watchEffect die zu überwachenden Eigenschaften nicht angeben muss. Es erfasst automatisch Abhängigkeiten. Solange wir im Rückruf auf die reaktionsfähigen Eigenschaften verweisen, wird der Rückruf ausgeführt, wenn sich diese Eigenschaften ändern, während watchEffect nur die angegebenen Eigenschaften überwachen und Änderungen vornehmen kann (ab v3 können mehrere Eigenschaften gleichzeitig angegeben werden).
• Der zweite Punkt ist, dass watch den neuen Wert und den alten Wert (den Wert vor der Aktualisierung) abrufen kann, watchEffect hingegen nicht.
• Der dritte Punkt ist, dass, wenn watchEffect vorhanden ist, es einmal ausgeführt wird, wenn die Komponente initialisiert wird, um Abhängigkeiten zu sammeln (ähnlich wie bei einer Berechnung). Dann ändern sich die gesammelten Abhängigkeiten und der Rückruf wird erneut ausgeführt. watch benötigt dies nicht, da es die Abhängigkeiten am Anfang angibt.
  

Anhand ihrer Unterschiede können wir ihre Vor- und Nachteile erkennen. Und Sie können basierend auf Ihren Geschäftsanforderungen die richtige Wahl treffen.

watchEffect Erweitert

Beenden Sie die Überwachung

watchEffect gibt eine Funktion zum Stoppen des Listeners wie folgt zurück:

const stop = Uhreffekt(() => {
  /* … */
})

// später
stoppen()

Die Beispiele stammen aus der offiziellen Dokumentation, die oben verlinkt ist.

Wenn watchEffect im Setup oder Lebenszyklus registriert ist, wird es automatisch gestoppt, wenn die Komponente ausgehängt wird.

Deaktivieren Sie den Nebeneffekt

Was ist ein Nebeneffekt? Unvorhersehbare Schnittstellenanforderungen sind ein Nebeneffekt. Angenommen, wir verwenden eine Benutzer-ID, um Benutzerdetails abzufragen, und überwachen dann die Benutzer-ID. Wenn sich die Benutzer-ID ändert, initiieren wir eine Anforderung. Dies ist sehr einfach und kann mit einer Uhr durchgeführt werden. Wenn sich unsere Benutzer-ID jedoch während des Datenanforderungsprozesses mehrmals ändert, stellen wir mehrere Anforderungen und die zuletzt zurückgegebenen Daten überschreiben alle zuvor zurückgegebenen Benutzerdetails. Dies führt nicht nur zu einer Verschwendung von Ressourcen, sondern garantiert auch nicht die Reihenfolge, in der die Watch-Callbacks ausgeführt werden. Und mit watchEffect können wir es tun.

beiUngültigkeitserklärung()

Der an onInvalidate(fn) übergebene Callback wird ausgeführt, wenn watchEffect erneut ausgeführt oder gestoppt wird.

UhrEffekt(() => {
      // Asynchroner API-Aufruf, gibt ein Operationsobjekt zurück const apiCall = someAsyncMethod(props.userID)

      beiUngültig(() ​​=> {
        // Den asynchronen API-Aufruf abbrechen.
        apiCall.cancel()
      })
})

Mithilfe von onInvalidate können wir eine elegantere Optimierung für die oben beschriebene Situation vornehmen.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von watchEffect in Vue3. Weitere Informationen zur Verwendung von Vue3 watchEffect finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!