vue须知（5）—— 你知道nextTick吗，它是干什么的，实现原理是什么？-一一网

这道题考查大家对vue异步更新队列的理解，有一定深度，如果能够很好回答此题，对面试效果有极大帮助

答题思路
1.nextTick是啥?下一个定义
2.为什么需要它呢?用异步更新队列实现原理解释
3我再什么地方用它呢?抓抓头，想想你在平时开发中使用它的地方
4.下面介绍一下如何使用nextTick
5最后能说出源码实现就会显得你格外优秀

先看看官方定义

Vue.nextTick([callback,context])
在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新之后的DOM

// 修改数据 
vm.msg = 'Hello' 
// DOM 还没有更新 
Vue.nextTick(function () { // DOM 更新了 
}) 
  
复制代码

vue如何检测到DOM更新完毕呢？
能监听到DOM改动的API：MutationObserver
理解MutationObserver
MutationObserver是HTML5新增的属性，用于监听DOM修改事件，能够监听到节点的属性、文本内
容、子节点等的改动，是一个功能强大的利器。

//MutationObserver基本用法 
var observer = new MutationObserver(function(){   //这里是回调函数 
  console.log('DOM被修改了！'); 
}); 
var article = document.querySelector('article'); 
observer.observer(article); 
复制代码

vue是不是用MutationObserver来监听DOM更新完毕的呢？
vue的源码中实现nextTick的地方

//vue@2.2.5 /src/core/util/env.js 
if (typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) ||  MutationObserver.toString() === '[object MutationObserverConstructor]')) { 
  var counter = 1 
  var observer = new MutationObserver(nextTickHandler) 
  var textNode = document.createTextNode(String(counter)) 
  observer.observe(textNode, { 
      characterData: true 
  }) 
  timerFunc = () => { 
    counter = (counter + 1) % 2 
    textNode.data = String(counter) 
  } 
} 
复制代码

事件循环（Event Loop）

在js的运行环境中，通常伴随着很多事件的发生，比如用户点击、页面渲染、脚本执行、网络请求，等等。为了协调这些事件的处理，浏览器使用事件循环机制。
简要来说，事件循环会维护一个或多个任务队列（task queues），以上提到的事件作为任务源往队列中加入任务。有一个持续执行的线程来处理这些任务，每执行完一个就从队列中移除它，这就是一次事件循环。

for(let i=0; i<100; i++){ 
    dom.style.left = i + 'px'; 
} 
复制代码

事实上，这100次for循环同属一个task，浏览器只在该task执行完后进行一次DOM更新。只要让nextTick里的代码放在UI render步骤后面执行，岂不就能访问到更新后的DOM了？

vue就是这样的思路，并不是用MO进行DOM变动监听，而是用队列控制的方式达到目的。
那么vue又是如何做到队列控制的呢？我们可以很自然的想到setTimeout，把nextTick要执行的代码
当作下一个task放入队列末尾。
vue的数据响应过程包含：数据更改->通知Watcher->更新DOM。而数据的更改不由我们控制，
可能在任何时候发生。如果恰巧发生在重绘之前，就会发生多次渲染。这意味着性能浪费，是vue
不愿意看到的。
所以，vue的队列控制是经过了深思熟虑的。在这之前，我们还需了解event loop的另一个重要概
念，microtask。

microtask

从名字看，我们可以把它称为微任务。

每一次事件循环都包含一个microtask队列，在循环结束后会依次执行队列中的microtask并移除，然后再开始下一次事件循环。
在执行microtask的过程中后加入microtask队列的微任务，也会在下一次事件循环之前被执行。也就是说macrotask总要等到microtask都执行完后才能执行，microtask有着更高的优先级。
microtask的这一特性，是做队列控制的最佳选择。vue进行DOM更新内部也是调用nextTick来做异步队列控制。而当我们自己调用nextTick的时候，它就在更新DOM的那个microtask后追加了我们自己的回调函数，从而确保我们的代码在DOM更新后执行，同时也避免了setTimeout可能存在的多次执行问题。
常见的microtask有：Promise、MutationObserver、Object.observe(废弃)，以及nodejs中的
process.nextTick.

看到了MutationObserver，vue用MutationObserver是想利用它的microtask特性，而不是想做DOM 监听。核心是microtask，用不用MutationObserver都行的。事实上，vue在2.5版本中已经删去了
MutationObserver相关的代码，因为它是HTML5新增的特性，在iOS上尚有bug。
那么最优的microtask策略就是Promise了，而令人尴尬的是，Promise是ES6新增的东西，也存在兼容问题呀。所以vue就面临一个降级策略。