Definition: performs a deferred callback after the end of the next DOM update cycle. Use this method immediately after modifying the data to get the updated dom. Therefore, the Vue method for obtaining the updated DOM is derived.

The execution in the Vue.nextTick() callback function should be js code that will operate on the DOM.

Understanding: nextTick() is calling the callback function after the next DOM update data. The simple understanding is that when the data is updated and rendered in 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: 'HelloWorld',
  data () {
    return {
      testMsg: "Original value",
    }
  },
  methods:{
    testClick:function(){
      let that = this
      that.testMsg = "Modified value"
      console.log(that.$refs.aa.innerText)   //that.$refs.aa Get specified DOM，Output: raw values
    }
  }
}

Use this.$nextTick()

 methods:{
    testClick:function(){
      let that=this
      that.testMsg="Modified value"
      that.$nextTick(function(){
        console.log(that.$refs.aa.innerText)  //Output: modified values
      });
    }
 }

Note: Vue's implementation of response is not to change the DOM immediately after the data changes, but to update the DOM according to certain policies.

$nextTick is a deferred callback executed after the end of the next DOM update cycle. If you use $nextTick after modifying the data, you can get the updated DOM in the callback.

When do I need Vue.nextTick()?

1. The DOM operation performed by the created() hook function of Vue life cycle must be placed in the callback function of Vue.nextTick(). The reason is that the DOM is not rendered when the created() hook function is executed, and the DOM operation is futile at this time. Therefore, the js code of DOM operation must be put into the callback function of Vue.nextTick(). The corresponding is the mounted hook function, because all DOM mounts have been completed when the hook function is executed.

created(){
    let that=this
    that.$nextTick(function(){  //Not used this.$nextTick()The method will report an error
        that.$refs.aa.innerHTML="created Button content changed in"  //Write to DOM element
    });
}

2. When you want to do something based on the new DOM after changing the data of DOM elements 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 js when you want to operate the new view immediately.

<template>
  <div class="hello">
    <h3 id="h">{{testMsg}}</h3>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      testMsg:"Original value",
    }
  },
  methods:{
    changeTxt:function(){
      let that=this;
      that.testMsg="Modified text value";  //vue Data change dom structure
      let domTxt=document.getElementById('h').innerText;  //follow-up js yes dom Operation of
      console.log(domTxt);  //The output can be seen vue After data modification DOM Not updated immediately, follow-up dom None of them are up to date
      if(domTxt==="Original value"){
        console.log("text data After being modified dom Content not updated immediately");
      }else {
        console.log("text data After being modified dom The content was updated immediately");
      }
    },
  }
}

The correct usage is: after vue changes the DOM element structure, use the vue.$nextTick() method to delay the execution of subsequent code after DOM data update.

changeTxt:function(){
    let that=this;
    that.testMsg="Modified text value";  //modify dom structure
    
    that.$nextTick(function(){  //use vue.$nextTick()Method can dom Delayed execution after data update
        let domTxt=document.getElementById('h').innerText; 
        console.log(domTxt);  //The output can be seen vue The data has not been modified DOM Not updated immediately,
        if(domTxt==="Original value"){
            console.log("text data After being modified dom Content not updated immediately");
        }else {
            console.log("text data After being modified dom The content was updated immediately");
        }
    });
}

How Vue.nextTick(callback) works:
The reason is that Vue performs DOM updates asynchronously. Once data changes are observed, Vue will open a queue and push the watcher that observes data changes in the same event loop into the queue. If the watcher is triggered multiple times, it will only be pushed to the queue once. This buffering behavior can effectively remove unnecessary calculations and DOM operations caused by duplicate data. At the next event loop, Vue empties the queue and makes the necessary DOM updates.
When you set vm.someData = 'new value', the DOM will not be updated immediately, but only when the asynchronous queue is cleared, that is, when the update is executed at the beginning of the next event cycle. If you want to do something according to the updated DOM state at this time, there will be a problem. To wait for Vue to finish updating the DOM after the data changes, you can use Vue.nextTick(callback) immediately after the data changes. In this way, the callback function will be called after the DOM update is completed.