vue nextTick详解

1.前言
1.1vue官方
**nextTick()：**等待下一次 DOM 更新刷新的工具方法。
**详细信息：**当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。
nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。

1.2事件循环-Event Loop
一个Event Loop会包括一个或多个task队列，持续线程会从队列中取出最早进入队列的任务进行执行，被取出的任务就叫做macroTask(宏任务), 每个macroTask都有一个任务源, 每个macroTask处理完之后就从队列中取出下一个时间最早进入的macroTask再重执行

```// 任务源
    1. script
    2. 事件
    3. Dom交互
    4. I/O
    5. UI Render
    6. setTimeout
    7. setInterval
    8. requestAnimationFrame
    .....

1.3miscroTask(微任务)
执行完每个macroTask之后，主线程会去检查该macroTask下的microTask是否为空，如果不为空，则按照时间顺序从早到晚取出，如果途中有遇到新的microTask, 那么会继续将该microTask推入到microTask队列里

1.4UI Render
伴随着miscroTask队列的清空，主线程就会执行UI Render, 也就是渲染界面，但是浏览器它并不会每次在UI Render任务下一定会渲染界面，视情况而言，现在主流浏览器一般都是按照60HZ 也就是16.7ms刷新频率进行渲染(不是精确估量)，一个macroTask通常是小于16.7ms, 所以浏览器每次会根据情况进行渲染

2.nextTick的实现
2.1源码
地址：vue/src/core/util/next-tick.js

export let isUsingMicroTask = false

// 用来存储所有需要执行的回调函数
const callbacks = []

// 用来标志是否正在执行回调函数
let pending = false

// 这个函数用来执行callbacks里存储的所有回调函数
function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

// 用来触发执行回调函数
let timerFunc

// 将触发方式赋值给timerFunc
// 如果支持promise，使用promise实现
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)

    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
 // 如果Promise不支持，但支持MutationObserver
 // H5新特性，异步,当dom变动是触发,注意是所有的dom都改变结束后触发
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {
    //如果有回调函数，执行回调函数
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 是否执行刷新callback队列
  if (!pending) {
    pending = true
    timerFunc()
  }
  // 如果没有传递回调函数，并且当前浏览器支持promise，使用promise实现
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

2.2降级策略
从源码可以看出vue的nextTick的兼容降级策略：
（micro-task）promise -> MutationObserver->（macro-task） setImmediate->（macro-task） setTimeout

2.3MutationObserver原理
MutationObserver 是 h5 新加的一个功能，其功能是监听dom节点的变动，在所有 dom 变动完成后，执行回调函数。
具体有一下几点变动的监听：
childList：子元素的变动
attributes：属性的变动
characterData：节点内容或节点文本的变动
subtree：所有下属节点（包括子节点和子节点的子节点）的变动

3.总计与思考
3.1总结
vue用异步队列的方式来控制DOM更新和nextTick回调先后执行；
nextTick并不是用来监听DOM变更，因为DOM变更是能够实时获取到的，它的作用是一次性更改数据；
micro-task因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕；
因为兼容性问题，vue不得不做了microtask向macrotask的降级方案；
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
3.2思考
可以发现，nextTick的实现，不仅仅用到了常见的事件循环原理，还考虑了timerFunc各种实现方法的支持兼容，以保证达到设计和封装的初衷。在日常的工作中，对公共方法和组件的封装实现，我们也可以引用其思想。在保证功能效果的同时，也可以兼容拓展。