A quoi sert nexttick dans vue

Dans vue, nexttick() est utilisé pour retarder l'appel de la fonction de rappel après la prochaine mise à jour des données du DOM ; vous pouvez exécuter le rappel différé après la fin du prochain cycle de mise à jour du DOM et l'utiliser pour obtenir le DOM mis à jour après avoir modifié les données. La syntaxe est "Vue .nextTick([callback,context])".

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

À quoi sert nexttick dans vue ?

Définition : exécuter un rappel différé après la fin du prochain cycle de mise à jour du DOM. Utilisez cette méthode immédiatement après avoir modifié les données pour obtenir le DOM mis à jour.

Donc, cette méthode Vue pour obtenir le DOM mis à jour a été dérivée. Par conséquent, l'exécution placée dans la fonction de rappel Vue.nextTick() doit être le code js qui exploite le DOM ;

Comprendre : nextTick() retarde la fonction de rappel jusqu'à la prochaine fois que le dom met à jour les données ; Lorsque les données sont mises à jour et rendues dans le dom, cette fonction est automatiquement exécutée.

<template>
  <div class="hello">
    <div>
      <button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: &#39;HelloWorld&#39;,
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      console.log(that.$refs.aa.innerText);   //that.$refs.aa获取指定DOM，输出：原始值
    }
  }
}
</script>

Utilisez this.$nextTick()

  methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      that.$nextTick(function(){
        console.log(that.$refs.aa.innerText);  //输出：修改后的值
      });
    }
  }

Remarque : l'implémentation de la réactivité par Vue ne signifie pas que le DOM change immédiatement après les modifications des données, mais selon une certaine La stratégie de mise à jour du DOM. $nextTick consiste à exécuter un rappel retardé après la fin du prochain cycle de mise à jour du DOM. Si vous utilisez $nextTick après avoir modifié les données, vous pouvez obtenir le DOM mis à jour dans le rappel

Quand devez-vous utiliser Vue.nextTick() ? ?

1. L'opération DOM effectuée par la fonction hook créée() du cycle de vie de Vue doit être placée dans la fonction de rappel de Vue.nextTick() La raison est que le DOM n'est pas du tout rendu lors de la création(). ) la fonction hook est exécutée à l'heure actuelle, les opérations DOM sont futiles, le code js pour les opérations DOM doit donc être placé dans la fonction de rappel de Vue.nextTick(). À cela correspond la fonction hook montée, car tous les montages DOM ont été terminés lorsque cette fonction hook est exécutée.

  created(){
    let that=this;
    that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
        that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
    });
  },

2. Lorsque vous souhaitez faire quelque chose basé sur le nouveau DOM après avoir modifié les données de l'élément DOM dans le projet, une série d'opérations js sur le nouveau DOM doivent être placées dans la fonction de rappel de Vue.nextTick( ); Compréhension populaire Oui : après avoir modifié les données, vous devez les utiliser lorsque vous souhaitez utiliser js pour utiliser la nouvelle vue immédiatement

<template>
  <div class="hello">
    <h3 id="h">{{testMsg}}</h3>
  </div>
</template>
 
<script>
export default {
  name: &#39;HelloWorld&#39;,
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods:{
    changeTxt:function(){
      let that=this;
      that.testMsg="修改后的文本值";  //vue数据改变，改变dom结构
      let domTxt=document.getElementById(&#39;h&#39;).innerText;  //后续js对dom的操作
      console.log(domTxt);  //输出可以看到vue数据修改后DOM并没有立即更新，后续的dom都不是最新的
      if(domTxt==="原始值"){
        console.log("文本data被修改后dom内容没立即更新");
      }else {
        console.log("文本data被修改后dom内容被马上更新了");
      }
    },
 
  }
}
</script>

L'utilisation correcte est la suivante : après que vue a modifié la structure de l'élément dom, utilisez vue.$nextTick () pour implémenter une exécution retardée après la mise à jour des données dom Code de suivi

    changeTxt:function(){
      let that=this;
      that.testMsg="修改后的文本值";  //修改dom结构
       
      that.$nextTick(function(){  //使用vue.$nextTick()方法可以dom数据更新后延迟执行
        let domTxt=document.getElementById('h').innerText; 
        console.log(domTxt);  //输出可以看到vue数据修改后并没有DOM没有立即更新，
        if(domTxt==="原始值"){
          console.log("文本data被修改后dom内容没立即更新");
        }else {
          console.log("文本data被修改后dom内容被马上更新了");
        }
      });
    },

3 Lorsque vous utilisez un plug-in tiers, si vous souhaitez réappliquer le plug-in lorsque certaines dynamiques dom sont générées par vue. changement, cette méthode sera également utilisée. À ce stade, vous devez utiliser la fonction de rappel de $nextTick Exécuter la méthode pour réappliquer le plug-in.

Vue.nextTick(callback) Principe d'utilisation :

La raison est que Vue effectue des mises à jour dom de manière asynchrone. Une fois les modifications de données observées, Vue ouvrira une file d'attente puis l'observera dans la même boucle d'événements. est poussé dans cette file d’attente. Si cet observateur est déclenché plusieurs fois, il ne sera placé dans la file d'attente qu'une seule fois. Ce comportement de mise en mémoire tampon peut éliminer efficacement les calculs inutiles et les opérations DOm provoqués par des données en double. Dans la prochaine boucle d'événements, Vue effacera la file d'attente et effectuera les mises à jour DOM nécessaires.

Lorsque vous définissez vm.someData = 'new value', le DOM ne sera pas mis à jour immédiatement. Au lieu de cela, les mises à jour nécessaires du DOM seront effectuées lorsque la file d'attente asynchrone sera effacée, c'est-à-dire lorsque la mise à jour sera effectuée au début de. la prochaine boucle d'événement. Si vous souhaitez faire quelque chose en fonction de l'état DOM mis à jour à ce moment-là, des problèmes surviendront. . Afin d'attendre que Vue ait fini de mettre à jour le DOM après les modifications des données, vous pouvez utiliser Vue.nextTick(callback) immédiatement après les modifications des données. Cette fonction de rappel sera appelée une fois la mise à jour du DOM terminée.

【Recommandation associée : "Tutoriel vue.js"】

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!