Qu'est-ce que vue.nexttick

vue.nexttick est une méthode Vue qui obtient le DOM mis à jour ; la méthode nextTick retarde la fonction de rappel jusqu'à la prochaine fois que le DOM met à jour les données, c'est-à-dire lorsque les données sont mises à jour puis rendues dans le DOM. , il exécutera automatiquement la fonction nextTick.

L'environnement d'exploitation de ce tutoriel : système Windows10, vue version 2.9, ordinateur thinkpad t480.

Recommandé : "tutoriel vue"

Qu'est-ce que Vue.nextTick() ?

Définition : Exécuter un rappel différé après le 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.

Cette méthode Vue pour obtenir le DOM mis à jour a donc é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. une compréhension simple est la suivante : lorsque les données sont mises à jour et rendues dans le dom, la 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 : Vue ne répond pas après le. les données changent, le DOM change immédiatement, mais le DOM est mis à jour selon une certaine stratégie. $nextTick consiste à exécuter un rappel différé 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 en avez-vous besoin. 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 l'opération DOM est effectuée. lorsque la fonction hook créée() est exécutée. En fait, aucun rendu n'est effectué et les opérations DOM à ce moment sont vaines, donc le code js pour les opérations DOM doit ê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 doit être placée dans la fonction de rappel de Vue.nextTick() ; L'interprétation populaire est la suivante : après avoir modifié les données, vous devez les utiliser lorsque vous souhaitez utiliser js pour faire fonctionner 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 : utilisez la vue.$ La méthode nextTick() après que vue modifie la structure de l'élément dom Pour implémenter l'exécution retardée du code suivant après la mise à jour des données dom

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内容被马上更新了");
        }
      });
    },

Vue.nextTick(callback) Principe d'utilisation :

La raison est que Vue exécute la mise à jour dom de manière asynchrone. Une fois que des modifications de données sont observées, Vue ouvrira une file d'attente, puis poussera l'observateur qui observe les modifications de données dans la même boucle d'événements 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, mais le DOM nécessaire sera mis à jour lorsque la file d'attente asynchrone sera effacée, c'est-à-dire lorsque la prochaine boucle d'événements démarrera. renouveler. Des problèmes surviennent si, à ce stade, vous souhaitez faire quelque chose en fonction de l'état DOM mis à jour. . Pour 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.

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!