nextTick源码分析：MutationObserver和MessageChannel

为什么要用nextTick

    
    



    

        
    
    点击显示输入框

运行结果是报错，找不到节点。也就是说，当你执行到isShow=true时，此时dom节点尚未更新，只能等待dom更新后，你才能执行下面的focus。

用MessageChannel实现

  
    
    
  
  
    

      

          
      
      点击显示输入框
    
  

用MutationObserver实现

    
    



    

        
    
    点击显示输入框

为何弃用MessageChannel使用MutationObserver

image

vue2中在2018年12月20号用MutationObser替换了MessageChannel（有很多博客说是相反的，但查git上的时间线是这样的），把2个都使用下对比便知结果：

因为MutationObserver是宏任务，MessageChannel是微任务，比它先执行，选用它肯定考虑了这部分因素。

  
    
    
  
  
    

      

          
      
      点击显示输入框
    
  

打印出来：

2
1

并不是按顺序执行，而是先宏任务MutationObserver，再微任务MessageChannel。