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

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