What is the usage of nexttick in vue

In vue, nexttick() is used to delay the callback function being called after the next DOM update data; you can execute the delayed callback after the next DOM update cycle ends, and use it to obtain the updated DOM after modifying the data. The syntax is "Vue.nextTick([callback,context])".

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What is the usage of nexttick in vue

Definition: Execute a delayed callback after the next DOM update cycle ends. Use this method immediately after modifying the data to get the updated DOM.

So this Vue method to get the updated DOM was derived. Therefore, the execution placed in the Vue.nextTick() callback function should be the js code that operates the DOM;

Understanding: nextTick() delays the callback function until the next time the DOM updates the data. The simple understanding is: when the data is updated and rendered in the dom, the function is automatically executed.

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

Use this.$nextTick()

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

Note: Vue is not responsive After the data changes, the DOM changes immediately, but the DOM is updated according to a certain strategy. $nextTick is to execute a delayed callback after the next DOM update cycle ends. If you use $nextTick after modifying the data, you can get the updated DOM in the callback.

When do you need to use Vue.nextTick()? ?

1. The DOM operation performed by the created() hook function of the Vue life cycle must be placed in the callback function of Vue.nextTick(). The reason is that when the created() hook function is executed, the DOM is not actually Performing any rendering, and performing DOM operations at this time is tantamount to futile, so the js code for DOM operations must be put into the callback function of Vue.nextTick(). Corresponding to this is the mounted hook function, because all DOM mounting has been completed when this hook function is executed.

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

2. When you want to do something based on the new DOM after changing the data of the DOM element in the project, a series of js operations on the new DOM need to be put into the callback function of Vue.nextTick() ;The popular understanding is: after changing the data, you need to use it when you want to use js to operate the new view immediately

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

The correct usage is: use the vue.$nextTick() method after vue changes the dom element structure To implement delayed execution of subsequent code after the dom data is updated

    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. When using a third-party plug-in, you hope to re-apply the plug-in when some of the dom dynamics generated by vue change. This will also be used. method, then you need to execute the method of re-applying the plug-in in the callback function of $nextTick.

Vue.nextTick(callback) Principle of use:

The reason is that Vue performs dom updates asynchronously. Once data changes are observed, Vue will open a queue and then put it in the same Watchers that observe data changes in the event loop are pushed into this queue. If this watcher is triggered multiple times, it will only be pushed to the queue once. This buffering behavior can effectively eliminate unnecessary calculations and DOm operations caused by duplicate data. In the next event loop, Vue will clear the queue and perform the necessary DOM updates.

When you set vm.someData = 'new value', the DOM will not be updated immediately, but the necessary DOM will be updated when the asynchronous queue is cleared, that is, when the next event loop starts. renew. If you want to do something based on the updated DOM state at this time, problems will arise. . In order to wait for Vue to finish updating the DOM after the data changes, you can use Vue.nextTick(callback) immediately after the data changes. This callback function will be called after the DOM update is completed.

【Related recommendation: "vue.js Tutorial"】

The above is the detailed content of What is the usage of nexttick in vue. For more information, please follow other related articles on the PHP Chinese website!