前言

学习Vue的过程中    
    
    
，大家肯定都使用过nextTick() 


     


     


    ，关于nextTick()的使用时机

 




 




 


，大家肯定都知道   

   

   

，那么它的工作原理是怎样的呢  

     

     

   ，本文就简单说一下它的nextTick()的工作原理
    
    
    。

nextTick的使用时机

首先记住：nextTick所指定的回调会在浏览器更新DOM完毕之后再执行     


     


     


。

举个例子：

在我自己做的一个单页面应用中


  




  




  

，我有一个需求  


  


  


，当从后端请求回数据后   
     
     
  ，马上就对页面进行更新 




 




 




。比如



   




   




   
，我要点击操作里的删除操作 



 



 



，前端删除数据后就向后端发请求               ，后端删除数据后返回数据




    




    




    ，如果我们想马上显示到页面上














，应该怎么做呢？

可能好多人会像我第一次做那样               ，比如我这个页面是用 v-for 遍历data这个数据显示出来的



     



     



     ，可能好多人就会直接把前端返回的数据直接重新赋值给data

   

   

   。但是这样是绝对不行的！这样只会导致数据其实是变了














，但是视图是不会变的    
    
    
，因为vue更新dom是异步的 


     


     


    ，无法通过同步代码赋值后马上去更新页面     

     

     

。所以即使删除成功了页面也不会显示出来  




  




  




。即使显示删除成功

 




 




 


，页面也不会更新


  


  


  。

如何更新

我们的需求是   

   

   

，请求回数据后马上更新页面  

     

     

   ，首先理解几个点     
     
     
。

1
    
    
    、vue更新Dom是异步更新   




   




   




。

如图官网的描述


  




  




  

，解释一下这段话  


  


  


，直接看可能有些懵   
     
     
  ，前两句话



   




   




   
，关于同步和异步 



 



 



，以及提到的"事件循环"               ，这就要从JS的运行机制说起




    




    




    ，戳我前往



 



 



 。第三句话














，“如果同一个 watcher 被多次触发               ，只会被推入到队列中一次    
    
    
”



     



     



     ，这是什么意思呢














，也在我的文章中可找到    
    
    
，戳我前往               。

2     


     


     


、理解执行时机

读完上面两篇文章 


     


     


    ，大家应该就知道宏任务和微任务了把

 




 




 


，而nextTick内部就是调用宏任务和微任务来完成事件调用的机制   

   

   

，让nextTick里的回调在一个事件循环的最后执行    




    




    




。为什么要在最后呢？在最后即意味着在所有异步任务之后  

     

     

   ，记得上一点吗


  




  




  

，“vue更新Dom是异步更新 


     


     


    ”  


  


  


，而我们又把nextTick里的回调放在了所有异步任务的最后   
     
     
  ，这样就解释了最开始那句话



   




   




   
，nextTick所指定的回调会在浏览器更新DOM完毕之后再执行














。

3 




 




 




、回到例子实现需求

我们想要实现需求 



 



 



，本例我们采用热更新               ，即只更新局部组件               。

我直接把我的子组件全放在router-view里的




    




    




    ，通过变化v-if来实现组件更新     



     



     



。

看到这里可能有人会问














，这不就是先把v-if设为false               ，再设置为true来实现吗



     



     



     ，要不要nextTick都一样














，那么这样想就大错特错了














。

还记得刚才说的“如果同一个 watcher 被多次触发    
    
    
，只会被推入到队列中一次

 




 




 


” 


     


     


    ，那篇文章已经解释过了

 




 




 


，vue会把所有代码都执行了再去渲染页面   

   

   

，所以我们这两条this.$isRouterAlive = false 和 this.$isRouterAlive = true  

     

     

   ，相当于只执行了最后一条等于true


  




  




  

，false都没执行过  


  


  


，所以相当于还是什么都没做   
     
     
  ，原始是true



   




   




   
，现在还是true
    
    
    。

加了个nextTick就不一样了 



 



 



，这段代码就相当于告诉vue               ，vue你先帮我执行 this.$isRouterAlive = false




    




    




    ，先不要管我nextTick里的东西














，你去渲染完了最后再来执行我nextTick里的代码     


     


     


。

这样一说大家是不是就比较明白了               ，this.$isRouterAlive = true 是在页面渲染过后 再执行的



     



     



     ，所以我们肉眼看其实已删除货物














，页面马上就更新了    
    
    
，其实其中经过了先把router-view里的子组件取消掉 


     


     


    ，即v-if = false

 




 




 


，然后再让 v-if = true   

   

   

，那么v-if大家都知道就是创建  

     

     

   ，相当于router-view里的内容被重新创建了


  




  




  

，所以此时的数据也是最新的 




 




 




。