Neue Verwendung von watch und watchEffect in Vue 3

1. Neue Verwendung der Uhr

In der optionalen API verwendet watch

betrachten:{

 Stimmung(aktuellerWert,vorherigerWert){

  console.log('cur',curVal);//Neuester Wert console.log('pre',preVal);//Vorherigen Wert ändern}

}

1.1.watch-Nutzungssyntax

Wenn Sie watch in Composition API verwenden, müssen Sie es zuerst importieren.

Die Syntax lautet:

importiere { watch } von "vue"

betrachten(

 Name ,

 ( curVal , preVal )=>{ //Geschäftsabwicklung},

 Optionen

)

Es gibt drei Parameter:

• name : Das zu überwachende Attribut
• (curVal,preVal)=>{ //業務處理} Pfeilfunktion, die den zuletzt überwachten Wert und den Wert vor dieser Änderung anzeigt, und hier wird eine logische Verarbeitung durchgeführt.
• options : Konfigurationselemente, Konfiguration des Listeners, z. B. ob Deep Listening durchgeführt werden soll.

Es wird nicht ausgeführt, wenn die Seite zum ersten Mal aufgerufen wird. Wenn sich der Wert ändert, werden der aktuelle letzte Wert und der Wert vor der Änderung ausgedruckt.

Beispiel 1 : Auf Daten warten

importiere { ref , watch } von "vue"

Standard exportieren{

 aufstellen(){

  const Stimmung = ref("")

  //Frame-Listener beobachten (Stimmung, (aktueller Wert, voriger Wert) => {

   Konsole.log('cur',curVal);

   Konsole.log('pre',preVal);

  },{

   //Konfigurationselemente})

  zurückkehren {

   Stimmung

  }

 }

}

watch kann auch mehrere Eigenschaftswerte überwachen. In diesem Fall werden die eingehenden Daten zu einem Array und die Konfigurationselemente bleiben unverändert.

1.2. watch überwacht mehrere Attributwerte

Beispiel 2 : Abhören mehrerer Eigenschaften

beobachten([Stimmung,Ziel],([aktuelleStimmung,aktuellesZiel],[vorherigeStimmung,vorherigesZiel])=>{

 console.log('aktuelleStimmung',aktuelleStimmung);

 console.log('vorStimmung',vorStimmung);

 console.log('aktuellesZiel',aktuellesZiel);

 console.log('vorZiel',vorZiel);

},{

  //Konfigurationselemente}) 

1.3. Referenzdatentyp des Überwachungsmonitors

Wenn Sie beim watch eines Referenzdatentyps nur eine seiner Eigenschaften überwachen,

Die Verwendungssyntax lautet wie folgt:

beobachten(()=>Objektname,(aktuellerWert,vorherigerWert)=>{

 //Frame hört auf eine Eigenschaft des Referenzdatentyps},{

 //Konfigurationselemente})

Der erste Parameter, die Rückruffunktion, gibt die Eigenschaften des Objekts zurück, das abgehört werden muss. Die folgenden Parameter sind dieselben wie oben.

Beispiel 3 : Frame-Listen-Objektattribut

<Vorlage>

 <div>

  {{obj}}

  <Eingabetyp="Text" v-Modell="Objektname">

 </div>

</Vorlage>

<Skript>

importiere { ref, reaktiv, watch } von "vue"

Standard exportieren{

 aufstellen(){

  const obj = reaktiv({ Name:'qq',Geschlecht:'qq' })

  beobachten(()=>Objektname,(aktuell,vorher)=>{

   Konsole.log('aktuell',aktuell);

  },{ })

  zurückkehren {

   obj

  }

 }

}

</Skript>

Wenn wir versuchen, das Attribut zu entfernen und das gesamte Objekt direkt zu überwachen, stellen wir fest, watch ungültig zu sein scheint. An dieser Stelle müssen wir watchEffect einführen.

2.Uhreneffekt

watchEffect ist auch ein Frame-Listener und eine Nebeneffektfunktion. Es überwacht alle Eigenschaften des referenzierten Datentyps, ohne dass eine bestimmte Eigenschaft angegeben werden muss. Die Überwachung erfolgt sofort, sobald es ausgeführt wird, und die Überwachung wird beendet, wenn die Komponente deinstalliert wird.

Beispiel 4 : Zuhörendes Objekt

<Vorlage>

  <div>

    {{obj}}

    <Eingabetyp="Text" v-Modell="Objektname">

    <Eingabetyp="Text" v-Modell="Objekt.Geschlecht">

  </div>

</Vorlage>

<Skript>

importiere { reaktiv , watchEffect } von "vue"

Standard exportieren{

  aufstellen(){

    let obj = reaktiv({ Name:'qq',Geschlecht:'qq'})

    UhrEffekt(() => {

      Konsole.log('Name', Objektname);

      console.log('Geschlecht' , Objekt.Geschlecht);

    })

    zurückkehren {

      obj

    }

  }

}

</Skript>

 

Der Parameter watchEffect hat nur eine Rückruffunktion. Aktualisieren Sie jetzt die Seite und watchEffect druckt das Ergebnis aus.

3. Der Unterschied und die Verbindung zwischen Uhr und Uhreffekt

watch und watchEffect sind beide Listener. Welche Beziehung besteht also zwischen ihnen?

3.1. Funktionen der Uhr

watch Überwachungsfunktion kann Konfigurationselemente hinzufügen oder auf leer setzen. Wenn das Konfigurationselement leer ist,

Die Funktionen der Uhr sind:

• Lazy : Beim Ausführen wird es nicht sofort ausgeführt.
• Genauer gesagt : Die zu überwachenden Eigenschaften müssen hinzugefügt werden.
• Sie können auf den vorherigen Wert der Eigenschaft zugreifen : Die Rückruffunktion gibt den neuesten Wert und den Wert vor der Änderung zurück.
• Konfigurierbar : Sie können Konfigurationselemente hinzufügen.

3.2.Konfigurationselemente überwachen

Die Konfigurationselemente von Watch können die Mängel der Watch-Funktionen ergänzen. Die Konfigurationselemente sind:

• immediate : konfiguriert, ob die Überwachungseigenschaft sofort ausgeführt wird. Wenn der Wert true ist, wird sie sofort nach der Ausführung ausgeführt. Wenn der Wert false ist, bleibt sie verzögert.
• deep : Konfiguriert, ob watch gründlich überwacht wird. Wenn der Wert true ist, können alle Eigenschaften des Objekts überwacht werden. Wenn der Wert false ist, müssen für bestimmte Eigenschaften spezifischere Funktionen angegeben werden.

3.3. Funktionen von watchEffect

Die Nebeneffektfunktion watchEffect weist die folgenden Eigenschaften auf:

• Nicht faul : Wird nach dem Ausführen sofort ausgeführt.
• Abstrakter : Sie müssen bei der Verwendung nicht angeben, wem Sie zuhören möchten, Sie können es direkt in der Rückruffunktion verwenden. Im Vergleich zur watch ist es schwieriger zu verstehen.
• Kein Zugriff auf vorherige Werte : Es kann nur auf den aktuellsten Wert zugegriffen werden, nicht jedoch auf den Wert vor der Änderung.

3.4. Zusammenhang zwischen watch und watchEffect

Die ersten beiden Funktionen von watch sind das genaue Gegenteil der beiden Funktionen von watchEffect . watch kann über Konfigurationselemente so geändert werden, dass es über watchEffect Funktionen verfügt.

Beispiel 5 : Überwachungsobjekt watch

<Vorlage>

 <div>

  {{obj}}

  <Eingabetyp="Text" v-Modell="Objektname">

 </div>

</Vorlage>

<Skript>

importiere { ref, reaktiv, watch } von "vue"

Standard exportieren{

 aufstellen(){

  const obj = reaktiv({ Name:'qq',Geschlecht:'qq' })

  beobachten(()=>obj,(aktuell,vorher)=>{

   Konsole.log('aktuell',aktuell);

  },{ 

   sofort:wahr,

   tief:wahr

  })

  zurückkehren {

   obj

  }

 }

}

</Skript>

Dies ist das Ende dieses Artikels über die neue Verwendung von watch und watchEffect in vue 3. Weitere relevante Inhalte zu watch und watchEffect in vue 3 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!