So verwenden Sie watchEffect in Vue, um reaktionsfähige Daten zu überwachen und DOM zu aktualisieren

Als Front-End-Framework sind datengesteuerte Ansichten einer der Kernpunkte von Vue. Wenn sich die in Vue definierten Daten ändern, wird auch die entsprechende Ansicht aktualisiert. Um die Leistung und Reaktionsgeschwindigkeit zu optimieren, werden in Vue3 das Reaktivitätssystem und die Composition API eingeführt. Als Teil eines reaktionsfähigen Systems kann watchEffect Datenänderungen überwachen und das DOM sofort aktualisieren. In diesem Artikel wird detailliert beschrieben, wie Sie watchEffect in Vue verwenden, um reaktionsfähige Daten zu überwachen und das DOM zu aktualisieren.

1. Responsives System

In Vue3 besteht der Kern des reaktionsfähigen Systems aus gewöhnlichen JavaScript-Objekten, die als „Reaktive Objekte“ bezeichnet werden. Durch die Verwendung der reaktiven Funktion zum Konvertieren eines Objekts in ein reaktionsfähiges Objekt kann Vue Änderungen in den Daten in diesem Objekt verfolgen und darauf reagieren.

Die wichtigsten in reaktiven Systemen verwendeten APIs sind:

1. reaktiv: Konvertieren Sie ein gewöhnliches JavaScript-Objekt in ein reaktives Objekt.
2. ref: Konvertieren Sie ein gewöhnliches JavaScript-Objekt in ein reaktionsfähiges Objekt und fügen Sie dem Objekt das Attribut .value hinzu. Sie können direkt auf den Wert dieses Objekts zugreifen und seinen Wert ändern. Wenn Sie es in einer Vorlage verwenden, müssen Sie zum Betrieb .value verwenden.
3. toRefs: Konvertieren Sie ein responsives Objekt in ein normales JavaScript-Objekt, wobei jede Eigenschaft als Ref-Objekt gekapselt ist.
4. berechnet: Definieren Sie eine berechnete Eigenschaft, und der Rückgabewert ist ein reaktionsfähiges Objekt. Wenn sich die Abhängigkeit des Berechnungsprozesses vom reaktionsfähigen Objekt ändert, wird die berechnete Funktion automatisch neu berechnet und aktualisiert.

2. watchEffect

watchEffect ist eine neue API in Vue3. Sie kann automatisch die Abhängigkeiten ableiten, die basierend auf dem reaktiven Objekt überwacht werden müssen. Sobald sich die abhängigen Daten ändern, wird die Rückruffunktion in watchEffect sofort ausgelöst. Die Verwendung von watchEffect ähnelt der von berechneten, watchEffect muss jedoch nicht auf Eigenschaften zugreifen, sondern nur das reaktive Objekt direkt in der Rückruffunktion verwenden.

watchEffect hat die folgenden Eigenschaften:

1. watchEffect wird ausgeführt, bevor der Dom aktualisiert wird, sodass er direkt nach der Aktualisierung der Daten in dieser Funktion verwendet werden kann.
2. watchEffect kann Änderungen in reaktionsfähigen Daten automatisch verfolgen, ohne Abhängigkeiten manuell festzulegen.
3. watchEffect muss eine parameterlose Bereinigungsfunktion zurückgeben. Wenn sich die zugehörigen Abhängigkeiten von watchEffect ändern und erneut ausgeführt werden, wird die Bereinigungsfunktion automatisch aufgerufen, um Ressourcen freizugeben.

Bei der Verwendung von watchEffect sind folgende Dinge zu beachten:

1. Führen Sie in watchEffect keine übermäßig zeitaufwändigen Vorgänge aus, da diese bei jeder Aktualisierung der Daten ausgeführt werden.
2. Wenn Sie Änderungen in bestimmten Daten genau überwachen müssen, sollten Sie zur Spezifikation auch die Überwachungsfunktion oder die abhängigen Parameter von watchEffect verwenden.

3. Verwenden Sie watchEffect, um das DOM zu aktualisieren.

Wir können die watchEffect-Funktion in der Einzeldateikomponente von Vue verwenden, um die DOM-Struktur in der Rückruffunktion zu aktualisieren. Auf diese Weise können wir die Ergebnisänderung sofort sehen, wenn sich die reaktiven Daten in der Komponente ändern.

Nachfolgend nehmen wir einen Zähler als Beispiel, um die Verwendung der watchEffect-Funktion zu demonstrieren:

<!-- Counter.vue -->
<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>
<script>
import { reactive, watchEffect } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    watchEffect(() => {
      document.title = `计数器：${state.count}`
    })

    function increment() {
      state.count++
    }

    return {
      count: state.count,
      increment
    }
  }
}
</script>

In diesem Beispiel definieren wir einen reaktiven Objektzustand und verwenden die watchEffect-Funktion, um dessen Änderungen zu überwachen. Wenn sich das count-Attribut ändert, wird der Code in der watchEffect-Rückruffunktion automatisch ausgeführt und der Tab-Titel des Browsers aktualisiert.

Zusätzlich zur Aktualisierung des Browsertitels können wir über die watchEffect-Funktion weitere Datenbindungsvorgänge implementieren, z. B. Klassen- und Stilbindung, Textinterpolation und andere Vorgänge. Durch diese Methoden können wir das Ein- und Ausblenden von Komponenten, Stilanpassungen usw. flexibel steuern.

4. Zusammenfassung

In Vue3 ist watchEffect ein sehr praktisches Tool, das das DOM sehr schnell aktualisieren kann, wenn sich die Daten ändern. Wenn Sie die watchEffect-Funktion verwenden, müssen Sie auf die Objekte achten, die sie abhört, und auf den Code in der Rückruffunktion, um Leistung und Codequalität sicherzustellen. Zusätzlich zu watchEffect bietet Vue3 auch reaktionsfähigere Funktionen und Kompositions-APIs, die in Kombination verwendet werden können, um unterschiedliche Anforderungen zu erfüllen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie watchEffect in Vue, um reaktionsfähige Daten zu überwachen und DOM zu aktualisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!