Die Verwendung und der Unterschied zwischen vue3 watch und watchEffect

1. Hörer ansehen

Vorstellung der Uhr

importiere { ref, reaktiv, beobachten, toRefs } von 'vue'

Grundlegende Datentypen überwachen ----- Überwachungsfunktionen:

1. Es weist ein gewisses Maß an Faulheit auf. Es wird nicht ausgeführt, wenn die Seite zum ersten Mal angezeigt wird, sondern nur, wenn sich die Daten ändern.

2. Parameter können aktuelle Werte und Originalwerte erhalten

3. Sie können auf Änderungen in mehreren Daten achten und einen Listener zum Übertragen dieser verwenden.

aufstellen() {
	const name = ref('leilei')
	watch(name, (aktuellerWert, vorherigerWert) => {
 	console.log(aktuellerWert, vorherigerWert)
 })
}
Vorlage: `Name: <input v-model="name" />`

Auf Referenztypen hören-----

aufstellen() {
	const nameObj = reaktiv({name: 'leilei', englishName: 'bob'})
 Hören Sie sich eine Datenüberwachung an (() => nameObj.name, (curVal, prevVal) => {
 	console.log(aktuellerWert, vorherigerWert)
 })
 Mehrere Daten überwachen watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
 	console.log(aktuellerName, aktuellesEng, '----', vorherigerName, aktuellesEng)
  setzeTimeout(() => {
   Stopp1()
  }, 5000)
 })
 const { name, englischerName } = toRefs(nameObj)
}
Vorlage: `Name: <input v-model="name" /> englischerName: <input v-model="englishName" />`

2.Uhreneffekt

Keine überflüssigen Parameter, nur eine Callback-Funktion

1. Sofortige Ausführung, ohne Verzögerung, und die Ausführung erfolgt beim ersten Laden der Seite.

2. Internen Code automatisch erkennen und ausführen, wenn eine Abhängigkeit im Code besteht

3. Der abzuhörende Inhalt muss nicht übergeben werden. Die Codeabhängigkeit wird automatisch erkannt. Es müssen nicht viele Parameter übergeben werden. Übergeben Sie einfach eine Rückruffunktion.

4. Sie können den Wert der vorherigen Daten nicht abrufen, Sie können nur den aktuellen Wert abrufen

5. Einige = asynchrone Operationen wären hier angemessener

UhrEffekt(() => {
	Konsole.log(NameObjekt.Name) 
})

Die Verwendung zum Abbrechen eines Listeners ist die gleiche wie die zum Abbrechen eines Watch-Listeners.

const stop = Uhreffekt(() => {
	Konsole.log(NameObjekt.Name) 
 setzeTimeout(() => {
 	stoppen()
 }, 5000)
})

const stop1 = watch([() => nameObj.name, () => nameObj.name], ([aktuellerName, aktuellesEng], [vorherigerName, aktuellesEng]) => {
 	console.log(aktuellerName, aktuellesEng, '----', vorherigerName, aktuellesEng)
  setzeTimeout(() => {
   Stopp1()
  }, 5000)
 })

Watch kann auch auf nicht verzögerte sofortige Ausführung umgestellt werden, indem ein dritter Parameter „immediate: true“ hinzugefügt wird.

 beobachten([() => nameObj.name, () => nameObj.name], ([aktuellerName, aktuellesEng], [vorherigerName, aktuellesEng]) => {
 	console.log(aktuellerName, aktuellesEng, '----', vorherigerName, aktuellesEng)
  setzeTimeout(() => {
   Stopp1()
  }, 5000)
 }, {
 	sofort: wahr
 })

Oben finden Sie detaillierte Informationen zur Verwendung von vue3 watch und watchEffect sowie zu deren Unterschieden. Weitere Informationen zu vue3 watch und watchEffect finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!