What is vue.nexttick

vue.nexttick is a Vue method that obtains the updated DOM; the nextTick method delays the callback function until the next time the dom updates the data. That is, when the data is updated and then rendered in the dom, it will Automatically execute the nextTick function.

The operating environment of this tutorial: windows10 system, vue version 2.9, thinkpad t480 computer.

Recommended: "vue tutorial"

What is Vue.nextTick()?

Definition: Execute a delayed callback after the next DOM update cycle. Use this method immediately after modifying 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 the DOM operation is performed when the created() hook function is executed. In fact, no rendering is performed, and DOM operations at this time are in vain, 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内容被马上更新了");
        }
      });
    },

Vue.nextTick(callback) Principle of use:

The reason is that Vue executes the dom update asynchronously. Once When data changes are observed, Vue will open a queue, and then push the watcher that observes data changes in the same event loop 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. Problems arise if at this point you want to do something based on the updated DOM state. . 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.

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