• 7.14 nextTick
    • 7.14.1 事件循环机制
    • 7.14.2 基本实现
    • 7.14.3 使用场景

    7.14 nextTick

    在上一节的内容中，我们说到数据修改时会触发setter方法进行依赖的派发更新，而更新时会将每个watcher推到队列中，等待下一个tick到来时再执行DOM的渲染更新操作。这个就是异步更新的过程。为了说明异步更新的概念，需要牵扯到浏览器的事件循环机制和最优的渲染时机问题。由于这不是文章的主线，我只用简单的语言概述。

    7.14.1 事件循环机制

    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进行视图的重新渲染。这一次循环，视图渲染要执行一千次，很明显这是很浪费性能的，我们只需要关注最后第一千次在界面上更新的结果而已。所以利用异步更新显得格外重要。

    7.14.2 基本实现

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

    1. // 原型上定义的方法
    2. Vue.prototype.$nextTick = function (fn) {
    3.   return nextTick(fn, this)
    4. };
    5. // 构造函数上定义的方法
    6. Vue.nextTick = nextTick;
    8. // 实际的定义
    9. var callbacks = [];
    10. function nextTick (cb, ctx) {
    11.     var _resolve;
    12.     // callbacks是维护微任务的数组。
    13.     callbacks.push(function () {
    14.       if (cb) {
    15.         try {
    16.           cb.call(ctx);
    17.         } catch (e) {
    18.           handleError(e, ctx, 'nextTick');
    19.         }
    20.       } else if (_resolve) {
    21.         _resolve(ctx);
    22.       }
    23.     });
    24.     if (!pending) {
    25.       pending = true;
    26.       // 将维护的队列推到微任务队列中维护
    27.       timerFunc();
    28.     }
    29.     // nextTick没有传递参数，且浏览器支持Promise,则返回一个promise对象
    30.     if (!cb && typeof Promise !== 'undefined') {
    31.       return new Promise(function (resolve) {
    32.         _resolve = resolve;
    33.       })
    34.     }
    35.   }

    nextTick定义为一个函数，使用方式为Vue.nextTick( [callback, context] ),当callback经过nextTick封装后，callback会在下一个tick中执行调用。从实现上，callbacks是一个维护了需要在下一个tick中执行的任务的队列，它的每个元素都是需要执行的函数。pending是判断是否在等待执行微任务队列的标志。而timerFunc是真正将任务队列推到微任务队列中的函数。我们看timerFunc的实现。

    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;
    12. }

    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,支持MutataionObserver

    1. else if (!isIE && typeof MutationObserver !== 'undefined' && (
    2.     isNative(MutationObserver) ||
    3.     // PhantomJS and iOS 7.x
    4.     MutationObserver.toString() === '[object MutationObserverConstructor]'
    5.   )) {
    6.     var counter = 1;
    7.     var observer = new MutationObserver(flushCallbacks);
    8.     var textNode = document.createTextNode(String(counter));
    9.     observer.observe(textNode, {
    10.       characterData: true
    11.     });
    12.     timerFunc = function () {
    13.       counter = (counter + 1) % 2;
    14.       textNode.data = String(counter);
    15.     };
    16.     isUsingMicroTask = true;
    17.   }

    3.如果不支持微任务方法，则会使用宏任务方法，setImmediate会先被使用

    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.   timerFunc = function () {
    3.     setTimeout(flushCallbacks, 0);
    4.   };
    5. }

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

    1. nextTick().then(() => {})

    7.14.3 使用场景

    说了这么多原理性的东西，回过头来看看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. }

    数据改变时，视图并不会同时改变，因此需要使用nextTick

    1. mounted() {
    2.   this.show = true;
    3.   this.$nextTick(function() {
    4.     this.$refs.myInput.focus();// 正常
    5.   })
    6. }