关于前端:nextTick-原理解析

nextTick 是什么

$nextTick：依据官网文档的解释，它能够在 DOM 更新结束之后执行一个回调函数，并返回一个 Promise（如果反对的话）

// 批改数据
vm.msg = "Hello";

// DOM 还没有更新
Vue.nextTick(function() {// DOM 更新了});

这块了解 EventLoop 的应该一看就懂，其实就是在下一次事件循环开始时开始更新 DOM，防止两头频繁的操作引起页面的重绘和回流。

这块援用官网文档：

可能你还没有留神到，Vue 在更新 DOM 时是 异步执行 的。只有侦听到数据变动，Vue 将开启一个队列，并缓冲在同一事件循环中产生的所有数据变更。如果同一个 watcher 被屡次触发，只会被推入到队列中一次。
这种在缓冲时去除反复数据对于防止不必要的计算和 DOM 操作是十分重要的。而后，在下一个的事件循环“tick”中，Vue 刷新队列并执行理论 (已去重的) 工作。Vue 在外部对异步队列尝试应用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不反对，则会采纳 setTimeout(fn, 0) 代替。

列如当设置 vm.text = 'new value' 时，该组件不会立刻从新渲染，当刷新队列时，组件会在下一个事件循环‘tick’中更新，

<div id="example">{{message}}</div>
var vm = new Vue({
  el: '#example',
  data: {message: '123'}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {vm.$el.textContent === 'new message' // true})

个别在设置了 this.xx='xx' 数据后，立刻失去最新的 DOM 数据时，才会用到$nextTick，因为 DOM 的更新是异步进行的，所以获取须要用到这个办法。

• Vue 异步更新策略

更新流程（源码解析）

1. 当数据被批改时，watcher 会侦听到变动，而后会将变动进行入队：

/*
 * Subscriber interface.
 * Will be called when a dependency changes.
 */
Watcher.prototype.update = function update() {
  /* istanbul ignore else */
  if (this.lazy) {this.dirty = true;} else if (this.sync) {this.run();
  } else {queueWatcher(this);
  }
};

2. 并应用 nextTick 办法增加一个 flushScheduleQueue 回调

/**
 * Push a watcher into the watcher queue.
 * Jobs with duplicate IDs will be skipped unless it's
 * pushed when the queue is being flushed.
 */
function queueWatcher(watcher) {
  var id = watcher.id;
  if (has[id] == null) {has[id] = true;
    if (!flushing) {queue.push(watcher);
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      var i = queue.length - 1;
      while (i > index && queue[i].id > watcher.id) {i--;}
      queue.splice(i + 1, 0, watcher);
    }
    // queue the flush
    if (!waiting) {
      waiting = true;

      if (!config.async) {flushSchedulerQueue();
        return;
      }
      nextTick(flushSchedulerQueue);
    }
  }
}

3. flushScheduleQueue 退出到 callback 数组中，并且异步执行

function nextTick(cb, ctx) {
  var _resolve;
  callbacks.push(function() {if (cb) {
      try {cb.call(ctx); // !! cb 就是退出的回调
      } catch (e) {handleError(e, ctx, "nextTick");
      }
    } else if (_resolve) {_resolve(ctx);
    }
  });
  if (!pending) {
    // 异步执行 操作 见 timerFunc
    pending = true;
    timerFunc();}
  // $flow-disable-line
  if (!cb && typeof Promise !== "undefined") {return new Promise(function(resolve) {_resolve = resolve;});
  }
}

4. timerFunc 操作就是异步执行了顺次判断应用：Promise.then=>MutationObserver=>setImmediate=>setTimeout

var timerFunc;

if (typeof Promise !== "undefined" && isNative(Promise)) {var p = Promise.resolve();
  timerFunc = function() {p.then(flushCallbacks);
    // 1. Promise.then
    if (isIOS) {setTimeout(noop);
    }
  };
  isUsingMicroTask = true;
} else if (
  !isIE &&
  typeof MutationObserver !== "undefined" &&
  (isNative(MutationObserver) ||
    MutationObserver.toString() === "[object MutationObserverConstructor]")
) {
  // 2.  MutationObserver
  var counter = 1;
  var observer = new MutationObserver(flushCallbacks);
  var textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {characterData: true,});
  timerFunc = function() {counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
  isUsingMicroTask = true;
} else if (typeof setImmediate !== "undefined" && isNative(setImmediate)) {
  // 3. setImmediate
  timerFunc = function() {setImmediate(flushCallbacks);
  };
} else {
  //4. setTimeout
  timerFunc = function() {setTimeout(flushCallbacks, 0);
  };
}

5. flushCallbacks 遍历所有的 callbacks 并执行

function flushCallbacks() {
  pending = false;
  var copies = callbacks.slice(0);
  callbacks.length = 0;
  for (var i = 0; i < copies.length; i++) {copies[i]();}
}

6. 其中就有后面退出的 flushScheduleQueue，利用 queue 中的 watcher 的 run 办法，更新组件

for (index = 0; index < queue.length; index++) {watcher = queue[index];
  watcher.run();}

总结

以上就是 vue 的 nextTick 办法的实现原理了，总结一下就是：

1. Vue 用异步队列的形式来管制 DOM 更新和 nextTick 回调先后执行
2. microtask 因为其高优先级个性，能确保队列中的微工作在一次事件循环前被执行结束
3. 因为兼容性问题，vue 不得不做了 microtask 向 macrotask 的降级计划

参考

• Vue-nextTick 源码地址
• 全面解析 Vue.nextTick 实现原理