vue.$nextTick应用

前言

在做一个用v-if管制input暗藏显示的性能时，显示后须要设置inpu焦点,然而ref设置焦点时，获取到的却是undefined。

思路

查找材料后，发现是因为input关上后立刻就取查看数据导致的。就是说，在关上显示input时，vue并没有马上去更新dom数据，而是先将这个操作放入一个队列中；如果咱们是反复执行的话，队列还会进去反复操作；等同一事件循环中的所有数据变动实现后，再进行解决队列中的数据。

为了在数据更新操作之后操作dom，所以能够在数据变动之后立刻应用vue.$nextTick，这样回调函数会在DOM更新实现后被调用，就能够获取最新的DOM元素。

理解$nextTick

vue官网文档的解释为：

在下次 DOM 更新循环完结之后执行提早回调。在批改数据之后立刻应用这个办法，获取更新后的 DOM。

简略的了解就是:当数据更新了,在dom中渲染后,主动执行该函数。

会用到的小知识点

宏工作（macrotask）
主代码块，setTimeout，setInterval， setImmediate，MessageChannel，postMessage

微工作（microtask）
promise，MutationObserver

工作执行程序以及渲染的执行
macrotask -> microtask -> 渲染 -> macrotask -> microtask -> 渲染 -> ......

源码剖析

const callbacks = []let pending = falselet timerFuncexport function nextTick (cb?: Function, ctx?: Object) {  let _resolve  callbacks.push(() => {    if (cb) {      try {        cb.call(ctx)      } catch (e) {        handleError(e, ctx, 'nextTick')      }    } else if (_resolve) {      _resolve(ctx)    }  })  if (!pending) {    pending = true    timerFunc()  }  // $flow-disable-line  if (!cb && typeof Promise !== 'undefined') {    return new Promise(resolve => {      _resolve = resolve    })  }}

从这段源码中，能够看到它基本上做的事件就是在nextTick的外层定义变量就造成了一个闭包，所以咱们每次调用$nextTick的过程其实就是在向callbacks新增回调函数的过程。

callbacks新增回调函数后又执行了timerFunc函数，pending用来标识同一个工夫只能执行一次。那么这个timerFunc函数是做什么用的呢，咱们持续来看代码：

export let isUsingMicroTask = falseif (typeof Promise !== 'undefined' && isNative(Promise)) {  //判断1：是否原生反对Promise  const p = Promise.resolve()  timerFunc = () => {    p.then(flushCallbacks)    if (isIOS) setTimeout(noop)  }  isUsingMicroTask = true} else if (!isIE && typeof MutationObserver !== 'undefined' && (  isNative(MutationObserver) ||  MutationObserver.toString() === '[object MutationObserverConstructor]')) {  //判断2：是否原生反对MutationObserver  let counter = 1  const observer = new MutationObserver(flushCallbacks)  const textNode = document.createTextNode(String(counter))  observer.observe(textNode, {    characterData: true  })  timerFunc = () => {    counter = (counter + 1) % 2    textNode.data = String(counter)  }  isUsingMicroTask = true} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {  //判断3：是否原生反对setImmediate  timerFunc = () => {    setImmediate(flushCallbacks)  }} else {  //判断4：下面都不行，间接用setTimeout  timerFunc = () => {    setTimeout(flushCallbacks, 0)  }}

这里呈现了好几个isNative函数，用来判断所传参数是否在以后环境原生就反对。

能够看到这外面是做了四个判断，对以后环境进行一直的降级解决。尝试应用原生的Promise.then、MutationObserver和setImmediate，上述三个都不反对最初应用setTimeout；

降级解决的目标都是将flushCallbacks函数放入微工作(判断1和判断2)或者宏工作(判断3和判断4)，期待下一次事件循环时来执行。MutationObserver是Html5的一个新个性，用来监听指标DOM构造是否扭转，也就是代码中新建的textNode；如果扭转了就执行MutationObserver构造函数中的回调函数，不过是它是在微工作中执行的。

最初，终于找到了咱们最终须要的flushCallbacks

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

它所做的事件也十分的简略，把callbacks数组复制一份，而后把callbacks置为空，最初把复制进去的数组中的每个函数顺次执行一遍；所以它的作用仅仅是用来执行callbacks中的回调函数。

总结

到这里，整个nextTick代码剖析结束，总结一下他的流程：

  1. 把回调函数放入callbacks期待执行
  2. 将执行函数放到微工作或者宏工作中
  3. 事件循环到了微工作或者宏工作，执行函数顺次执行callbacks中的回调

本文自参考