7.14 nextTick

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

7.14.1 事件循环机制

  1. 完整的事件循环机制需要了解两种异步队列:macro-taskmicro-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-taskscript任务执行,脚本执行期间产生的macro-task,micro-task推到对应的队列中4.2 执行全部micro-task里的微任务事件4.3 执行DOM操作,渲染更新页面4.4 执行web worker等相关任务4.5 循环,取出macro-task中一个宏任务事件执行,重复4的操作。

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

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

7.14.2 基本实现

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

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

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

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

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

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">
  2. // js
  3. data() {
  4. show: false
  5. },
  6. mounted() {
  7. this.show = true;
  8. this.$refs.myInput.focus();// 报错
  9. }

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

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