Maison > interface Web > Voir.js > le corps du texte

Comment utiliser la montre sous vue3

WBOY
Libérer: 2023-05-17 12:14:26
avant
2961 Les gens l'ont consulté

    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);
    });
    Copier après la connexion

    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);
    });
    Copier après la connexion

    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 }
    );
    Copier après la connexion

    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 }
    );
    Copier après la connexion

    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 }
    );
    Copier après la connexion

    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>
    Copier après la connexion

    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(&#39;值发生了变更&#39;, newValue, oldValue);
      },
      { deep: true, immediate: true }
    );
    Copier après la connexion

    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(&#39;值发生了变更&#39;, newValue, oldValue);
      },
      { deep: true, immediate: true }
    );
    Copier après la connexion

    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>
    Copier après la connexion

    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>
    Copier après la connexion

    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!

    Étiquettes associées:
    source:yisu.com
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!