vue.$nextTick使用

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 = false
let timerFunc

export 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 = false
if (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中的回调

本文自参考