1. 完整的事件循环机制需要了解两种异步队列：macro-task和micro-task
    2. macro-task常见的有 setTimeout, setInterval, setImmediate, script脚本, I/O操作，UI渲染
    3. micro-task常见的有 promise, process.nextTick, MutationObserver等
    4. 完整事件循环流程为：4.1 micro-task空，macro-task队列只有script脚本，推出macro-task的script任务执行，脚本执行期间产生的macro-task，micro-task推到对应的队列中4.2 执行全部micro-task里的微任务事件4.3 执行DOM操作，渲染更新页面4.4 执行web worker等相关任务4.5 循环，取出macro-task中一个宏任务事件执行，重复4的操作。

    从上面的流程中我们可以发现，最好的渲染过程发生在微任务队列的执行过程中，此时他离页面渲染过程最近，因此我们可以借助微任务队列来实现异步更新，它可以让复杂批量的运算操作运行在JS层面，而视图的渲染只关心最终的结果，这大大降低了性能的损耗。

    举一个这一做法好处的例子： 由于Vue是数据驱动视图更新渲染，如果我们在一个操作中重复对一个响应式数据进行计算，例如 在一个循环中执行this.num ++一千次，由于响应式系统的存在，数据变化触发setter，setter触发依赖派发更新，更新调用run进行视图的重新渲染。这一次循环，视图渲染要执行一千次，很明显这是很浪费性能的，我们只需要关注最后第一千次在界面上更新的结果而已。所以利用异步更新显得格外重要。

    Vue用一个queue收集依赖的执行，在下次微任务执行的时候统一执行queue中Watcher的run操作,与此同时，相同id的watcher不会重复添加到queue中,因此也不会重复执行多次的视图渲染。我们看nextTick的实现。

    1.如果浏览器执行Promise,那么默认以Promsie将执行过程推到微任务队列中。

    1. var timerFunc;
    3. if (typeof Promise !== 'undefined' && isNative(Promise)) {
    4.   var p = Promise.resolve();
    5.   timerFunc = function () {
    6.     p.then(flushCallbacks);
    7.     // 手机端的兼容代码
    8.     if (isIOS) { setTimeout(noop); }
    9.   };
    10.   // 使用微任务队列的标志
    11.   isUsingMicroTask = true;

    flushCallbacks是异步更新的函数，他会取出callbacks数组的每一个任务，执行任务，具体定义如下：

    1. function flushCallbacks () {
    2.   pending = false;
    3.   var copies = callbacks.slice(0);
    4.   // 取出callbacks数组的每一个任务，执行任务
    5.   callbacks.length = 0;
    6.   for (var i = 0; i < copies.length; i++) {
    7.     copies[i]();
    8.   }
    9. }

    2.不支持promise,支持

    1.  else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
    2.     // Fallback to setImmediate.
    3.     // Techinically it leverages the (macro) task queue,
    4.     // but it is still a better choice than setTimeout.
    5.     timerFunc = function () {
    6.       setImmediate(flushCallbacks);
    7.     };
    8.   }

    4.所有方法都不适合，会使用宏任务方法中的setTimeout

    1. else {
    2.     setTimeout(flushCallbacks, 0);
    3.   };
    4. }

    当nextTick不传递任何参数时，可以作为一个promise用，例如：

    说了这么多原理性的东西，回过头来看看nextTick的使用场景，由于异步更新的原理，我们在某一时间改变的数据并不会触发视图的更新，而是需要等下一个tick到来时才会更新视图，下面是一个典型场景：

    1. <input v-if="show" type="text" ref="myInput">
    3. // js
    4. data() {
    5.   show: false
    6. },
    7. mounted() {
    8.   this.show = true;
    9.   this.$refs.myInput.focus();// 报错
    10. }
    1. mounted() {
    2.   this.show = true;
    3.   this.$nextTick(function() {
    4.     this.$refs.myInput.focus();// 正常