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