Nutzungs- und Best-Practice-Handbuch für die Überwachung in Vue3

Vorwort

Dieser Artikel enthüllt die Best Practices zum Überwachen in Vue3 in Form von Experimenten.

Der Hauptzweck dieses Artikels besteht darin, zu untersuchen, wie man beim Suchen nach Reaktionsdaten die aktuellen und vorherigen Werte erhält. Übrigens werde ich die Verwendung von watch überprüfen und dann vorstellen, wie man mit ref und reactive reaktionsfähige Daten definiert, um in Zusammenarbeit mit watch aktuelle und vorherige Werte abzurufen.

1. API-Einführung

beobachten(WatcherSource, Rückruf, [WatchOptions])

Typ WatcherSource<T> = Ref<T> | (() => T)

Schnittstelle WatchOptions erweitert WatchEffectOptions {
    tief?: boolesch // Standard: false
  sofort?: boolesch // Standard: false
  
}

Parameterbeschreibung:

WatcherSource: Wird verwendet, um die zu beobachtende reaktive Variable anzugeben. WatcherSource kann ref-responsive Daten übergeben und reaktive responsive Objekte müssen in Form von Funktionen geschrieben werden.

Callback: Die auszuführende Callback-Funktion, die nacheinander den aktuellen Wert newValue und den vorherigen Wert oldValue als Eingabeparameter erhalten kann.

WatchOptions: unterstützt tiefgehend und unmittelbar. Wenn Sie das reaktionsfähige Objekt genau überwachen müssen, setzen Sie „deep: true“; standardmäßig ist watch „lazy“. Wenn wir „immediate: true“ setzen, führt watch die Rückruffunktion sofort nach der Initialisierung aus.

Darüber hinaus unterstützt die Uhr von vue3 auch das Abhören mehrerer Antwortdaten und kann die Uhrüberwachung auch manuell stoppen.

2. Überwachung mehrerer Datenquellen

<Vorlage>
  <div Klasse="Uhr-Test">
    <div>Name: {{name}}</div>
    <div>Alter:{{Alter}}</div>
  </div>
  <div>
    <button @click="changeName">Name ändern</button>
    <button @click="changeAge">Alter ändern</button>
  </div>
</Vorlage>

<Skript>
  importiere {ref, watch} von 'vue'

  Standard exportieren {
    Name: "Home",
    aufstellen() {

      const name = ref('Dateiname des Objekts')
      konstantes Alter = ref(25)

      const watchFunc = watch([Name, Alter], ([Name, Alter], [vorherigerName, vorherigesAlter]) => {
        console.log('neuerName', Name, 'alterName', vorherigerName)
        console.log('neuesAlter', Alter, 'altesAlter', vorherigesAlter)
        wenn (Alter > 26) {
          watchFunc() // Überwachung stoppen}
      },{sofort:wahr})

      const changeName = () => {
        Name.Wert = "Arimura Kasumi"
      }
      const changeAge = () => {
        Alter.Wert += 2
      }
      zurückkehren {
        Name,
        Alter,
        Name ändern,
        Alter ändern
      }
    }
  }
</Skript>

Phänomen: Bei einer Änderung von Name und Alter überwacht die Uhr die Datenänderungen. Wenn das Alter über 26 liegt, beenden wir die Überwachung. Wenn wir das Alter zu diesem Zeitpunkt ändern, wird die Rückruffunktion der Überwachung aufgrund des Stopps der Überwachung ungültig.

Fazit: Wir können watch verwenden, um Änderungen mehrerer Werte zu überwachen, oder wir können der Watch-Funktion einen Namen geben und die Überwachung dann durch Ausführen der Funktion name() beenden.

3. Listening-Array

<Vorlage>
  <div Klasse="Uhr-Test">
    <div>ref definiert ein Array: {{arrayRef}}</div>
    <div>reaktives Definitionsarray: {{arrayReactive}}</div>
  </div>
  <div>
    <button @click="changeArrayRef">Ändert das erste Element des Ref-Definition-Arrays</button>
    <button @click="changeArrayReactive">Ändern Sie das erste Element des reaktiven Definitionsarrays</button>
  </div>
</Vorlage>

<Skript>
  importiere {ref, reactive, watch} von 'vue'

  Standard exportieren {
    Name: 'WatchTest',
    aufstellen() {
      const arrayRef = ref([1, 2, 3, 4])
      const arrayReactive = reaktiv([1, 2, 3, 4])

      //ref nicht tief
      const arrayRefWatch = watch(arrayRef, (neuerWert, alterWert) => {
        console.log('neueArrayRefWatch', neuerWert, 'alteArrayRefWatch', alterWert)
      })

      //ref tief
      const arrayRefDeepWatch = watch(arrayRef, (neuerWert, alterWert) => {
        console.log('newArrayRefDeepWatch', neuerWert, 'oldArrayRefDeepWatch', alterWert)
      }, {deep: true})

      //reaktiv, Quelle ist keine Funktion const arrayReactiveWatch = watch(arrayReactive, (newValue, oldValue) => {
        console.log('newArrayReactiveWatch', neuerWert, 'oldArrayReactiveWatch', alterWert)
      })

      // Best Practices für die Array-Überwachung - reaktive und Quelldaten werden auf funktionale Weise zurückgegeben und kopierte Daten werden zurückgegeben const arrayReactiveFuncWatch = watch(() => [...arrayReactive], (newValue, oldValue) => {
        console.log('neueArrayReactiveFuncWatch', neuerWert, 'alteArrayReactiveFuncWatch', alterWert)
      })

      const changeArrayRef = () => {
        arrayRef.Wert[0] = 6
      }
      const changeArrayReactive = () => {
        arrayReactive[0] = 6
      }
      zurückkehren {
        ArrayRef,
        ArrayReaktiv,
        ArrayRef ändern,
        ArrayReaktiv ändern
      }
    }
  }
</Skript>

Phänomen: Wenn ein Array als reaktionsfähige Datenreferenz definiert ist und „deep: true“ nicht hinzugefügt wird, kann „watch“ keine Wertänderungen überwachen. Wenn „deep: true“ hinzugefügt wird, kann „watch“ zwar Datenänderungen erkennen, aber der alte Wert ist derselbe wie der neue Wert, d. h. der alte Wert kann nicht abgerufen werden. Wenn das Array als responsives Objekt definiert ist, wird keine Verarbeitung durchgeführt und watch kann Datenänderungen erkennen, aber der alte Wert ist derselbe wie der neue Wert. Wenn die Datenquelle von watch als Funktion geschrieben wird und ein Array geklont und über den Spread-Operator zurückgegeben wird, können während der Überwachung sowohl der neue als auch der alte Wert abgerufen werden.

Fazit: Beim Definieren eines Arrays ist es am besten, die Daten als responsives Objekt zu definieren. Auf diese Weise müssen Sie beim Beobachten nur die Datenquelle in Form einer Funktion schreiben und ein Array-Return über den Erweiterungsoperator klonen, sodass Sie beim Beobachten den neuen und den alten Wert abrufen können.

4. Zu überwachende Objekte

<Vorlage>
  <div Klasse="Uhr-Test">
    <div>Benutzer:{</div>
      <div>Name:{{objReactive.Benutzer.name}}</div>
      <div>Alter:{{objReactive.user.age}}</div>
    <div>}</div>
    <div>Marke:{{objReactive.brand}}</div>
    <div>
      <button @click="changeAge">Alter ändern</button>
    </div>
  </div>
</Vorlage>

<Skript>
  importiere {ref, reactive, watch} von 'vue'
  importiere _ von „lodash“;

  Standard exportieren {
    Name: 'WatchTest',
    aufstellen() {
      const objReactive = reaktiv({Benutzer: {Name: 'Channel', Alter: '20'}, Marke: 'Channel'})

      //reaktive Quelle ist eine Funktion const objReactiveWatch = watch(() => objReactive, (newValue, oldValue) => {
        Konsole.log('objReactiveWatch')
        console.log('neu:',JSON.stringify(neuerWert))
        console.log('alt:',JSON.stringify(alterWert))
      })

      //reaktiv, Quelle ist Funktion, tief: true
      const objReactiveDeepWatch = watch(() => objReactive, (neuerWert, alterWert) => {
        Konsole.log('objReactiveDeepWatch')
        console.log('neu:',JSON.stringify(neuerWert))
        console.log('alt:',JSON.stringify(alterWert))
      }, {deep: true})

      // Best Practices für Object Deep Watching – reaktive und Quelldaten werden auf funktionale Weise zurückgegeben und tief kopierte Daten werden zurückgegeben const objReactiveCloneDeepWatch = watch(() => _.cloneDeep(objReactive), (newValue, oldValue) => {
        Konsole.log('objReactiveCloneDeepWatch')
        console.log('neu:',JSON.stringify(neuerWert))
        console.log('alt:',JSON.stringify(alterWert))
      })

      const changeAge = () => {
        objReactive.user.age = 26
      }

      zurückkehren {
        objReaktiv,
        Alter ändern
      }
    }
  }
</Skript>

Phänomen: Wenn ein Objekt als reaktionsfähiges Objekt definiert und in Form einer Funktion zurückgegeben wird und deep: true nicht hinzugefügt wird, kann watch die Wertänderungen nicht überwachen. Wenn deep: true hinzugefügt wird, kann watch die Datenänderungen erkennen, aber der alte Wert ist derselbe wie der neue Wert, d. h. der alte Wert kann nicht abgerufen werden. Wenn die Datenquelle von watch in Form einer Funktion geschrieben und eine Deep Copy geklont wird (hier wird die Deep Copy der Bibliothek lodash verwendet), um ein Objekt zurückzugeben, können die neuen und alten Werte während der Überwachung abgerufen werden.

Fazit: Beim Definieren eines Objekts ist es am besten, die Daten als responsives Objekt zu definieren. Auf diese Weise müssen Sie beim Beobachten nur die Datenquelle in Form einer Funktion schreiben und ein Objekt durch eine tiefe Kopie zurückgeben. Sie können beim Zuhören den neuen und den alten Wert abrufen.

5. Fazit

1. Normalerweise definieren wir primitive Daten (Zahl, Zeichenfolge usw.) als Referenzantwortdaten und Referenzdaten (Array, Objekt) als reaktive Antwortdaten.

2. Wenn wir watch verwenden, um Datenänderungen zu überwachen und sowohl neue als auch alte Werte abrufen müssen, müssen wir die Datenquelle als Funktion definieren und eine vollständige Kopie der Datenquelle zurückgeben. Wenn wir nur den neuen Wert benötigen, können wir die Option deep:true hinzufügen.
Tatsächlich spielt es keine Rolle, ob die Referenztypdaten als Ref-Formular definiert sind. Sie müssen die Datenquelle nur als Funktion definieren und eine vollständige Kopie der Datenquelle zurückgeben, um die alten und neuen Werte zu erhalten ~ hahahahahahahahahahahahahaha, aber ich denke, die beste Vorgehensweise besteht darin, den Referenztyp als reaktive Daten zu definieren.

Damit ist dieser Artikel über die Verwendung und Best Practice-Anleitung von Watch in Vue3 abgeschlossen. Weitere relevante Inhalte zur Verwendung von Watch in Vue3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!