Puisqu'il s'agit de surveillance de données, ce qui est surveillé, ce sont ses changements. Ensuite, vous devez être capable de capturer ses modifications, les données surveillées doivent donc être des données réactives
watch(WatcherSource, Callback, [WatchOptions])
Paramètres :
WatcherSource : les données réactives que vous souhaitez surveiller.
Callback : Fonction de rappel à exécuter, paramètres d'entrée (newValue, oldValue).
[WatchOptions] : profond, immédiat et affleurant sont facultatifs.
Pour la configuration des paramètres de WatchOptions :
deep : lorsqu'une surveillance approfondie des données de type référence telles que des objets est requise, définissez deep : true et la valeur par défaut est false.
immédiat : par défaut, watch est paresseux. Lorsque immédiat : true est défini, watch exécutera la fonction de rappel une fois immédiatement après l'initialisation.
flush : contrôlez le timing d'exécution de la fonction de rappel. Il peut être configuré pour pré, publier ou synchroniser.
Pre : valeur par défaut Lorsque la valeur surveillée change, la fonction de rappel est exécutée en premier (exécutée avant la mise à jour du DOM).
Post : Une fois le DOM mis à jour et rendu, la fonction de rappel est exécutée.
sync : Une fois la valeur surveillée modifiée, la fonction de rappel est exécutée de manière synchrone (il est recommandé de l'utiliser avec parcimonie).
const count = ref(1); watch(count, (newValue, oldValue) => { console.log('值发生了变更', newValue, oldValue); });
peut obtenir la nouvelle valeur et l'ancienne valeur.
const count = ref({ a: 1, b: 2 }); const handleClick = function () { count.value.a = 5; }; watch(count, (newValue, oldValue) => { console.log('值发生了变更', newValue, oldValue); });
Même si l'ensemble du tableau est surveillé en tant que type de données de référence, les modifications apportées à l'un de ses éléments internes ne seront pas observées. Le code de la montre n'est donc pas exécuté.
À ce stade, vous devez utiliser une surveillance approfondie : 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 } );
La valeur a changé Proxy {a : 5, b : 2} Proxy {a : 5, b : 2}
On peut noter que la surveillance approfondie nécessite le type de données de référence lui-même, et non ses attributs. De plus, il ne peut obtenir que la nouvelle valeur, mais pas l’ancienne valeur.
const 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 } );
De cette façon, copiez en profondeur la source de données de type référence de la montre pour terminer l'acquisition des anciennes et des nouvelles valeurs :
La valeur a changé {a : 5, b: 2 } {a: 1, b: 2}
const single = reactive({ count: 1, test: 2 }); const handleClick = function () { single.count++; }; watch( () => single.count, (newValue, oldValue) => { console.log('值发生了变更', newValue, oldValue); }, { immediate: true } );
L'essentiel ici est () => single.count, ce qui est surveillé est le nombre en simple, seulement lorsque cet attribut change. La fonction de rappel sera déclenchée. Dans ce cas, il est possible d'obtenir les anciennes et les nouvelles valeurs.
<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>
les données réactives, qu'elles soient profondes : vraies ou non, n'ont aucun effet. Si un attribut en un seul changement, il peut être surveillé, puis la fonction de rappel est exécutée.
La différence avec le n°3 est que seules de nouvelles valeurs peuvent être obtenues dans ce cas.
Par défaut, la montre est paresseuse lorsque nous setimmediate: true
, la montre exécutera la fonction de rappel immédiatement après l'initialisation.
const count = ref(1); const handleClick = function () { count.value++; }; watch( count, (newValue, oldValue) => { console.log('值发生了变更', newValue, oldValue); }, { deep: 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 } );
Si deux valeurs changent en même temps, la fonction de rappel de la montre ne sera déclenchée qu'une seule fois et la fonction de rappel de la montre sera déclenchée à chaque changement de valeur.
Si vous souhaitez déclencher un rappel lors de la modification d'une cellule de données, vous pouvez ajouter nextTick entre les deux modifications de données.
La fonction de rappel a priorité sur l'exécution de la mise à jour du DOM, lors de la surveillance des changements de valeur, la valeur par défaut de vidage est pre. Cela signifie que s'il y a une opération liée au DOM dans la fonction de rappel et qu'immediat: true est configuré dans le paramètre, une erreur sera signalée car le DOM n'a pas été rendu à ce moment et le DOM ne peut pas être obtenu.
Regardons ensuite le code :
<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>
Le résultat obtenu :
---La valeur de 1 a changé 2 1
Dans la fonction de rappel, la nouvelle valeur est devenue 2, mais le DOM a quand même obtenu le même qu'avant. Par défaut, la valeur de rinçage est pre. Lorsque la valeur change, la fonction de rappel sera déclenchée avant la mise à jour du DOM.
<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>
après le rendu du dom Le résultat est :
--- 2 La valeur a changé 2 1
Lorsque la fonction de rappel est appelée, le Le DOM a été mis à jour Terminé. Le DOM obtenu à ce moment est le DOM qui a été mis à jour après les modifications des données.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!