Vue源码03 Vue中nextTick的实现

使用nextTick

Vue中的nextTick的作用是，在DOM更新完毕之后执行一个回调。

// 修改数据
vm.msg = 'Hello'

// DOM 还没有更新

Vue.nextTick(function () {
  // DOM 更新了
})

通过nextTick，我们可以操作更新后的DOM。

MutationObserver

MutationObserver是HTML5新增的属性，可以用来监听DOM的修改（包括节点属性、文本内容、子节点的改动）：

var observer = new MutationObserver(function(){
  //这里是回调函数
  console.log('DOM被修改了');
});

var article = document.querySelector('article');
observer.observer(article);

但是可惜的是，Vue并不是通过这个API实现的（曾经使用过这个API，但是并不是利用它来检测DOM的更新，并且在V2.5版本中将这个API的使用从源代码中移除了）

那么Vue究竟是如何实现的检测DOM更新的呢？

异步任务

我们都知道，JavaScript是一个单线程的语言，当要主线程任务完成会后，就会去读取异步任务的“任务队列”，这就是JavaScript的运行机制。具体到异步任务的任务队列，又分为宏任务（Microtasks）和微任务（Macrotasks）。在每次Event Loop的最后，最后一个UI Render的步骤，可以把它理解为一个宏任务，在这个步骤中，会更新DOM。

例如下面的代码：

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

浏览器并不会将DOM更新100次，而是在执行完同步任务（for循环）后才会去MacroTask队列中执行UI Render，这样只会执行一次更新。如果出现动画的效果可以使用requestAnimationFrame：

let i = 0;
(function changeLeft() {
  if (i < 100) {
    requestAnimationFrame(() => {
      dom.style.left = i + 'px';
      i++;
      changeLeft()
    })
  }
})()

Vue是如