Vue中nextTick有什么技巧？nextTick的容易完成

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。

可以看到，nextTick主要功能就是改变数据后让回调函数作用于dom更新后。很多人一看到这里就懵逼了，为什么需要在dom更新后再执行回调函数，我修改了数据后，不是dom自动就更新了吗？

这个和JS中的Event Loop有关，网上教程不计其数，在此就不再赘述了。建议明白Event Loop后再继续向下阅读本文。

举个实际的例子：

我们有个带有分页器的表格，每次翻页需要选中第一项。正常情况下，我们想的是点击翻页器，向后台获取数据，更新表格数据，操纵表格API选中第一项。

但是，你会发现，表格数据是更新了，但是并没有选中第一项。因为，你选中第一项时，虽然数据更新了，但是DOM并没有更新。此时，你可以使用nextTick，在DOM更新后再操纵表格第一项的选中。

那么，nextTick到底做了什么了才能实现在DOM更新后执行回调函数？

源码分析

nextTick的源码位于src/core/util/next-tick.js，总计118行，十分的短小精悍，十分适合初次阅读源码的同学。

nextTick源码主要分为两块：

1.能力检测

2.根据能力检测以不同方式执行回调队列

能力检测

这一块其实很简单，众所周知，Event Loop分为宏任务（macro task）以及微任务（ micro task），不管执行宏任务还是微任务，完成后都会进入下一个tick，并在两个tick之间执行UI渲染。

但是，宏任务耗费的时间是大于微任务的，所以在浏览器支持的情况下，优先使用微任务。如果浏览器不支持微任务，使用宏任务；但是，各种宏任务之间也有效率的不同，需要根据浏览器的支持情况，使用不同的宏任务。

nextTick在能力检测这一块，就是遵循的这种思想。

// Determine (macro) task defer implementation.
// Technically setImmediate should be the ideal choice, but it's only available
// in IE. The only polyfill that consistently queues the callback after all DOM
// events triggered in the same loop is by using MessageChannel.
/* istanbul ignore if */
// 如果浏览器不支持Promise，使用宏任务来执行nextTick回调函数队列
// 能力检测，测试浏览器是否支持原生的setImmediate（setImmediate只在IE中有效）
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // 如果支持，宏任务（ macro task）使用setImmediate
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
  // 同上
} else if (typeof MessageChannel !== 'undefined' && (
  isNative(MessageChannel)   
关键词：Vue中nextTick有啥技巧？nextTick的容易完成