关于vue.js:vuenextTick使用

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 中的回调

本文自参考