NextTick usage example in vue

What is ()

The official documentation is explained as follows:

Execute a delayed callback after the next DOM update loop ends. Use this method immediately after modifying the data to obtain the updated DOM.

The focus of this sentence in the official document I understand is on the last half of the sentence to obtain the updated DOM. The implication of obtaining the updated DOM is that the operation requires the updated DOM and cannot use the previous DOM or use the previous DOM or have problems, so this Vue method for obtaining the updated DOM is derived. Therefore, the execution of the js code that is placed in the () callback function should be operated on the DOM, such as the Swiper extension package.

var swiper = new Swiper('.swiper-container', {
   pagination: '.swiper-pagination',
   nextButton: '.swiper-button-next',
   prevButton: '.swiper-button-prev',
   paginationClickable: true,
   spaceBetween: 30,
   centeredSlides: true,
   autoplay: 2500,
   autoplayDisableOnInteraction: false
  });

<ul >
  <li v-for="item in list">{{item}}</div>
</ul>
 
 new Vue({
  el:'#demo',
  data:{
   list=[0,1,2,3,4,5,6,7,8,9,10]
  },
  methods:{
   push:function(){
     (11);
     (function(){
       alert('The data has been updated')
     });

     this.$nextTick(function(){
       alert('v-for rendering has been completed')
     })
   }
}})

• (callback)`, when the data changes, the callback is executed after the update.
• Vue.$nextTick(callback)`, the callback executed after the dom changes.

The above are all the knowledge points introduced this time. Thank you for your support.