Comment utiliser la montre sous vue3

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).

Tout d'abord, la surveillance d'une seule référence de données

const count = ref(1);
watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
});

peut obtenir la nouvelle valeur et l'ancienne valeur.

Deuxièmement, surveillez la référence des données de type de référence : surveillance approfondie

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é.

1, le type de référence ref effectue directement une surveillance approfondie

À 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.

2. Copie profonde de la référence de type référence et surveillance approfondie

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}

Trois, surveiller les données uniques : réactive

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.

Quatrièmement, surveillez les données de type de référence : réactives

<template>
  <div class="mine-box">
    <div ref="countDom">{{ single.count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from &#39;vue&#39;;
const single = reactive({ count: 1, test: { a: 1, b: 2 } });
const handleClick = function () {
  single.test.a++;
};
watch(
  single,
  (newValue, oldValue) => {
    console.log(&#39;值发生了变更&#39;, 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.

Cinquième, immédiat : vrai

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 }
);

Sixièmement, surveillez plusieurs sources de données

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.

Seven, configuration de vidage

1. Par défaut, la fonction de rappel est appelée avant la fin du rendu dom

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 &#39;vue&#39;;
const count = ref(1);
const countDom = ref(null);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log(&#39;---&#39;, countDom.value.textContent);
    console.log(&#39;值发生了变更&#39;, 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.

2, flush : 'post’ Exécutez la fonction de rappel

<template>
  <div class="mine-box">
    <div ref="countDom">{{ count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;;
const count = ref(1);
const countDom = ref(null);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log(&#39;---&#39;, countDom.value.textContent);
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { deep: true, flush: &#39;post&#39; }
);
</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!