Da es sich um eine Datenüberwachung handelt, werden nur deren Änderungen überwacht. Dann müssen Sie in der Lage sein, die Änderungen zu erfassen, daher müssen die überwachten Daten reaktionsfähige Daten sein.
watch(WatcherSource, Callback, [WatchOptions])
Parameter:
WatcherSource: die reaktionsfähigen Daten, die Sie überwachen möchten.
Callback: Auszuführende Callback-Funktion, Eingabeparameter (newValue, oldValue).
[WatchOptions]: Deep, Immediate und Flush sind optional.
Für die Parameterkonfiguration von WatchOptions:
deep: Wenn eine umfassende Überwachung von Referenztypdaten wie Objekten erforderlich ist, legen Sie deep: true fest, und der Standardwert ist false.
immediate: Standardmäßig ist die Uhr verzögert. Wenn „immediate: true“ festgelegt ist, führt die Uhr die Rückruffunktion sofort nach der Initialisierung aus.
flush: Steuern Sie den Ausführungszeitpunkt der Rückruffunktion. Es kann auf „Pre“, „Post“ oder „Sync“ eingestellt werden.
Vorher: Standardwert. Wenn sich der überwachte Wert ändert, wird zuerst die Rückruffunktion ausgeführt (ausgeführt, bevor das DOM aktualisiert wird).
Beitrag: Nachdem das DOM aktualisiert und gerendert wurde, wird die Rückruffunktion ausgeführt.
sync: Sobald sich der überwachte Wert ändert, wird die Callback-Funktion synchron ausgeführt (es wird empfohlen, sie sparsam zu verwenden).
const count = ref(1); watch(count, (newValue, oldValue) => { console.log('值发生了变更', newValue, oldValue); });
der neue und der alte Wert ermittelt werden.
const count = ref({ a: 1, b: 2 }); const handleClick = function () { count.value.a = 5; }; watch(count, (newValue, oldValue) => { console.log('值发生了变更', newValue, oldValue); });
Auch wenn das gesamte Array als Referenzdatentyp überwacht wird, werden Änderungen an einem seiner internen Elemente nicht beobachtet. Der Code in der Uhr wird also nicht ausgeführt.
Zu diesem Zeitpunkt müssen Sie eine Tiefenüberwachung verwenden: deep:true
const count = ref({ a: 1, b: 2 }); const handleClick = function () { count.value.a = 5; }; watch( count, (newValue, oldValue) => { console.log('值发生了变更', newValue, oldValue); }, { deep: true } );
Der Wert hat sich geändert Proxy {a: 5, b: 2} Proxy {a: 5, b: 2}
Es ist zu beachten, dass für eine umfassende Überwachung der Referenzdatentyp selbst und nicht seine Attribute erforderlich sind. Außerdem kann er nur den neuen Wert erhalten, nicht jedoch den alten Wert.
2. Referenztyp-Ref-Deep-Copy und Deep-Monitoringconst count = ref({ a: 1, b: 2 }); const handleClick = function () { count.value.a = 5; }; watch( () => { return { ...count.value }; }, (newValue, oldValue) => { console.log('值发生了变更', newValue, oldValue); }, { deep: true } );
Der Wert hat sich geändert {a: 5, b: 2 } {a: 1, b: 2}Drei, einzelne Daten überwachen: reaktiv
const single = reactive({ count: 1, test: 2 }); const handleClick = function () { single.count++; }; watch( () => single.count, (newValue, oldValue) => { console.log('值发生了变更', newValue, oldValue); }, { immediate: true } );
<template> <div class="mine-box"> <div ref="countDom">{{ single.count }}</div> <button @click="handleClick">按钮</button> </div> </template> <script setup> import { ref, reactive, watch } from 'vue'; const single = reactive({ count: 1, test: { a: 1, b: 2 } }); const handleClick = function () { single.test.a++; }; watch( single, (newValue, oldValue) => { console.log('值发生了变更', newValue, oldValue); }, { immediate: true } ); </script>
const count = ref(1); const handleClick = function () { count.value++; }; watch( count, (newValue, oldValue) => { console.log('值发生了变更', newValue, oldValue); }, { deep: true, immediate: true } );
immediate: true
const count = ref(1); const double = ref(2); const handleClick = function () { count.value++; double.value++; }; watch( [count, double], (newValue, oldValue) => { console.log('值发生了变更', newValue, oldValue); }, { deep: true, immediate: true } );
Sieben, Flush-Konfiguration
1. Standardmäßig wird die Callback-Funktion aufgerufen, bevor das DOM-Rendering abgeschlossen ist.
<template> <div class="mine-box"> <div ref="countDom">{{ count }}</div> <button @click="handleClick">按钮</button> </div> </template> <script setup> import { ref, watch } from 'vue'; const count = ref(1); const countDom = ref(null); const handleClick = function () { count.value++; }; watch( count, (newValue, oldValue) => { console.log('---', countDom.value.textContent); console.log('值发生了变更', newValue, oldValue); }, { deep: true } ); </script>
Das erhaltene Ergebnis:
---Der Wert von 1 hat sich um 2 1 geändertIn der Rückruffunktion ist der neue Wert zu 2 geworden, aber das DOM wurde immer noch erhalten das gleiche wie vorher. Standardmäßig ist der Flush-Wert pre. Wenn sich der Wert ändert, wird die Rückruffunktion ausgelöst, bevor das DOM aktualisiert wird. 2, blush: 'post’Das Ergebnis der Ausführung der Callback-Funktion
<template> <div class="mine-box"> <div ref="countDom">{{ count }}</div> <button @click="handleClick">按钮</button> </div> </template> <script setup> import { ref, watch } from 'vue'; const count = ref(1); const countDom = ref(null); const handleClick = function () { count.value++; }; watch( count, (newValue, oldValue) => { console.log('---', countDom.value.textContent); console.log('值发生了变更', newValue, oldValue); }, { deep: true, flush: 'post' } ); </script>
, nachdem der Dom gerendert wurde:
--- 2 Der Wert hat sich geändert 2 1Wenn die Callback-Funktion aufgerufen wird, wird der DOM wurde aktualisiert Abgeschlossen. Das zu diesem Zeitpunkt erhaltene DOM ist das DOM, das nach Datenänderungen aktualisiert wurde.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Uhr unter vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!