$nextTick VS setTimeout, voyez leurs différences

Cet article comparera brièvement $nextTick et setTimeout pour voir les différences entre eux.

Un développeur front-end (Xiao Zhi) est entré dans un bar Vue. Ash a commandé son cocktail préféré : Nuxt. Le barman travaille dur pour le préparer. Puis il a commencé à bavarder tout seul.

Xiao Zhi a raconté comment il a découvert $nextTick sous la méthode d'instance de Vue 3 et a été choqué. Xiaozhi utilise Vue depuis un certain temps et il s'est habitué à écrire $watch et $emit comme méthodes d'instance. Alors, à quoi sert $nextTick ? La documentation Vue indique qu'elle "[diffère] un rappel qui est exécuté après le prochain cycle de mise à jour du DOM".

Mais Xiaozhi n'y croyait pas.

Il continue en racontant comment il a essayé de faire ça :

this.loadingAnimation = true
this.startVeryLongCalculation()
this.completeVeryLongCalculation()
this.loadingAnimation = false

Ça marche. Pourquoi?

Que fait nextTick ?

nextTickAccepte une fonction de rappel qui est retardée jusqu'au prochain cycle de mise à jour du DOM. C'est juste la manière de Vue de dire : "Hé, si vous voulez exécuter une fonction après la mise à jour du DOM (ce qui arrive rarement), je veux que vous utilisiez nextTick au lieu de setTimeout".

Vue.nextTick(() => {}) // syntax

Les paramètres setTimeout et nextTick seront discutés bientôt ci-dessous. Nous utilisons cet exemple pour visualiser le comportement de nextTick :

<template>
  <div>
    {{ currentTime }}
  </div>
</template>

<script>
export default {
  name: &#39;getCurrentTime&#39;,
  data() {
    return {
      currentTime: &#39;&#39;
    }
  },
  mounted() {
    this.currentTime = 3;

    this.$nextTick(() => {
        let date = new Date()
        this.currentTime = date.getFullYear()
    });
  }
}
</script>

Exécutez cet extrait de code sur l'ordinateur J. Il affichera 2021année. Ce n'est pas que vous n'obtiendrez pas le même résultat si vous supprimez nextTick. Cependant, vous devez comprendre que Vue modifiera le DOM en fonction du contenu des données.

Dans l'extrait de code ci-dessus, Vue met à jour le DOM vers 3, puis appelle le rappel, met à jour le DOM vers 2021 et enfin confie le contrôle au navigateur, qui affiche 2021.

Jusqu'à présent, nous avons examiné nextTick en insérant une fonction de rappel dans la file d'attente de rappel et en exécutant la fonction au moment approprié.

Cela pourrait vous intéresser. Le rappel dans nextTick est utilisé comme microtâche dans la boucle d'événement. Le nextTick code source de indique clairement que "nextTick les comportements exploitent une file d'attente de microtâches, accessible via local Promise.then ou MutationObserver." fonction.

Remplaçons le code ci-dessus par

:setTimeout()

<template>
  <div>
    {{ currentTime }}
  </div>
</template>

<script>
export default {
  name: &#39;getCurrentTime&#39;,
  data() {
    return {
      currentTime: &#39;&#39;
    }
  },
  mounted() {
    this.currentTime = 3;

    setTimeout(() => {
      let date = new Date()
      this.currentTime = date.getFullYear()
    }, 0);
  }
}
</script>

pour exécuter cet extrait de code. Voyez d’abord

puis setTimeout. Cela se produit rapidement, vous devez donc actualiser votre navigateur si vous ne voyez pas ce comportement. nextTick

Dans l'extrait de code ci-dessus, Vue met à jour le DOM vers

et fournit le contrôle du navigateur. Le navigateur affiche ensuite 3, appelle la fonction de rappel, met à jour le DOM vers 2021 et enfin confie le contrôle au navigateur, qui affiche désormais

. L'implémentation de

33 utilise s2021 comme méthode de secours sur les navigateurs qui ne prennent pas en charge 2021 et

(navigateurs IE 6-10 et Opera Mini), et pour les navigateurs qui ne prennent pas en charge

et nextTick (IE 10), c'est plus Tendance à Promise. MutationObserveretTimeoutQuand utiliser nexttickPromiseMutationObserversetImmediateQuand vous souhaitez utiliser

Quand vous voulez vous assurer que le DOM reflète vos données

• Lorsque vous essayez d'effectuer une opération asynchrone, vous rencontrez des erreurs telles que setTimeout. N'oubliez pas que Vue met à jour le DOM de manière asynchrone
• Le dernier exemple :

• <div id="app">
    <div ref="listScroll" class="scrolledList">
      <ul ref="scrolledHeight">
        <li v-for="month in months">
          {{month}}
        </li>               
      </ul>
    </div>
  
    <input type="text" placeholder="Add Month" v-model="month">
    <button @click="addMessage" @keyup.enter="addMessage"> Add Month</button>
  </div>
  
  <script src="https://unpkg.com/vue@next"> 
    Vue.createApp({
      data() {
        return {
          month: &#39;&#39;,
          months: [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;June&#39;, &#39;July&#39;, &#39;Aug&#39;]
        }
      },
      mounted() {
        this.updateScrollNextTick()
      },
      methods: {
        addMessage() {
          if(this.month == &#39;&#39;){
            return
          }
  
          this.months.push(this.month)
          this.month = &#39;&#39;
          this.updateScrollNextTick()
        },
        updateScrollNextTick () {
          let scrolledHeight = this.$refs.scrolledHeight.clientHeight
  
          this.$nextTick(() => {
            this.$refs.listScroll.scrollTo({
              behavior: &#39;smooth&#39;,
              top: scrolledHeight
            })
          })
        }
      },
    })
    .mount("#app")
  </script>

  Uncaught (in promise) DOMException
Exemple d'adresse : https://codepen.io/ammezie/pen/OJpOvQE

Partie principale :

Résultat d'exécution :

Dans l'extrait de code ci-dessus, nous souhaitons obtenir un effet de défilement fluide vers le bas lorsqu'un nouvel élément est ajouté à la liste. Jetez un œil au code et essayez de le modifier pour supprimer le

et vous perdrez cet effet de défilement fluide. Vous pouvez également essayer d'utiliser

au lieu de .

RésuménextTicksetTimeoutDans cet article, nous avons exploré le fonctionnement de nextTick. Nous examinons de plus près en quoi il diffère du setTimeout JavaScript normal et couvrons des cas d'utilisation pratiques. nextTick

Adresse originale en anglais : https://blog.logrocket.com/understanding-nexttick-in-vue-js/

Auteur : Chimezie Enyinnaya

Traducteur : Front-end Xiaozhi

Adresse de réimpression : https:// segmentfault.com/a/1190000040246186

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

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!