首先需要说明一下，Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 Watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际（已去重的）工作。

Vue 在内部对异步队列尝试使用原生的 Promise.then 、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

简单点说，就是 Vue 在修改数据后，视图是不会立刻就更新的，而是等同一「事件循环」中的所有数据变化完成之后，再统一进行视图更新。

vm.message = "changed";

// 使用后就立刻来获取 DOM 这样是不行的，此时 DOM 还没更新
console.log(vm.$el.textContent); // 在这里是无法获取 ‘changed’ 的

// Vue.nextTick 会在 DOM 更新执行，此时 DOM 已经完成更新
Vue.nextTick(function() {
    console.log(vm.$el.textContent); // 可以正确获取 ‘changed’
})

前置知识

JavaScript 的执行是单线程的，所谓的单线程就是事件任务要排队执行，前一个任务结束，才会执行后一个任务，这就是同步任务，为了避免前一个任务执行了很长时间还没结束，那下一个任务就不能执行的情况，引入了异步任务的概念。

简单来说分成这几个步骤：

• 所有同步任务都在主线程上执行，形成一个执行栈。
• 主线程之外，还存在一个任务队列（task queue）。只要异步任务有了运行结果，会把其回调函数作为一个任务添加到任务队列中。
• 一旦执行栈中的所有同步任务执行完毕，就会读取任务队列，看看里面有那些任务，将其添加到执行栈，开始执行。
• 主线程不断重复上面的第三步。

这里主线程的执行过程就是一个 tick，而所有的异步结果都是通过任务队列来调度。Event-Loop 分为宏任务和微任务，无论是执行宏任务还是微任务，完成后都会进入到一下 tick，并在两个 tick 之间进行 UI 渲染。

这其实就是前端的『事件循环机制』，有兴趣的可以看看这篇文章了解一下。

实现原理

nextTick 的实现单独有一个JS文件来维护它，在 src/core/util/next-tick.js 中。
nextTick 源码主要分为两块：能力检测和根据能力检测以不同方式执行回调队列。

能力检测

由于宏任务耗费的时间是大于微任务的，所以在浏览器支持的情况下，优先使用微任务。如果浏览器不支持微任务，再使用宏任务。

// 空函数，可用作函数占位符
import { noop } from 'shared/util' 

// 错误处理函数
import { handleError } from './error'

// 是否是 IE、IOS、内置函数
import { isIE, isIOS, isNative } from './env'

// 使用 MicroTask 的标识符，这里是因为火狐在<=53时 无法触发微任务，在 modules/events.js 文件中引用进行安全排除
export let isUsingMicroTask = false 

// 用来存储所有需要执行的回调函数
const callbacks = []

// 用来标志是否正在执行回调函数
let pending = false 

// 对 callbacks 进行遍历，然后执行相应的回调函数
function flushCallbacks () {
    pending = false
    // 这里拷贝的原因是：
    // 有的 cb 执行过程中又会往 callbacks 中加入内容
    // 比如 $nextTick 的回调函数里还有 $nextTick
    // 后者的应该放到下一轮的 nextTick 中执行
    // 所以拷贝一份当前的，遍历执行完当前的即可，避免无休止的执行下去
    const copies = callbcks.slice(0)
    callbacks.length = 0
    for(let i = 0; i < copies.length; i++) {
        copies[i]()
    }
}

let timerFunc // 异步执行函数 用于异步延迟调用 flushCallbacks 函数

/**
  * 在 2.5 版本中，我们使用(宏)任务(与微任务结合使用)。
  * 然而，当状态在重新绘制之前发生变化时，就会出现一些微妙的问题
  * 同样，在事件处理程序中使用(宏)任务会导致一些奇怪的行为
  * 因此，我们现在再次在任何地方使用微任务。
  * */ 
// 优先使用 Promise
if(typeof Promise !== 'undefined' && isNative(Promise)) {
    const p = Promise.resolve()
    timerFunc = () => {
        p.then(flushCallbacks)
        
        // IOS 的 UIWebView, Promise.then 回调被推入 microTask 队列，但是队列可能不会如期执行
        // 因此，添加一个空计时器强制执行 microTask
        if(isIOS) setTimeout(noop)
    }
    isUsingMicroTask = true
} else if(!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) || MutationObserver.toString === '[object MutationObserverConstructor]')) {
    // 当 原生 Promise 不可用时，使用 原生 MutationObserver
    // e.g. PhantomJS, iOS7, Android 4.4
 
    let counter = 1
    // 创建 MO 实例，监听到 DOM 变动后会执行回调 flushCallbacks
    const observer = new MutationObserver(flushCallbacks)
    const textNode = document.createTextNode(String(counter))
    observer.observe(textNode, {
        characterData: true // 设置true 表示观察目标的改变
    })
    
    // 每次执行 timerFunc 都会让文本节点的内容在 0/1之间切换
    // 切换之后将新值复制到 MO 观测的文本节点上
    // 节点内容变化会触发回调
    timerFunc = () => {
        counter = (counter + 1) % 2
        textNode.data = String(counter) // 触发回调
    }
    isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
    timerFunc = () => {
        setImmediate(flushCallbacks)
    }
} else {
    timerFunc = () => {
        setTimeout(flushCallbacks, 0)
    }
}

执行回调队列

next-tick.js 对外暴露了 nextTick 这一个参数，所以每次调用 Vue.nextTick 时会执行：

• 把传入的回调函数 cb 压入 callbacks 数组
• 执行 timerFunc 函数，延迟调用 flushCallbacks 函数
• 遍历执行 callbacks 数组中的所有函数

export function nextTick(cb? Function, ctx: Object) {
    let _resolve
    // cb 回调函数会统一处理压入 callbacks 数组
    callbacks.push(() => {
        if(cb) {
            try {
                cb.call(ctx)
            } catch(e) {
                handleError(e, ctx, 'nextTick')
            }
        } else if (_resolve) {
            _resolve(ctx)
        }
    })
    
    // pending 为 false 说明本轮事件循环中没有执行过 timerFunc()
    if(!pending) {
        pending = true
        timerFunc()
    }
    
    // 当不传入 cb 参数时，提供一个 promise 化的调用 
    // 如 nextTick().then(() => {})
    // 当 _resolve 执行时，就会跳转到 then 逻辑中
    if(!cb && typeof Promise !== 'undefined') {
        return new Promise(resolve => {
            _resolve = resolve
        })
    }
}

这里的 callbacks 没有直接在 nextTick 中执行回调函数的原因是保证在同一个 tick 内多次执行 nextTick，不会开启多个异步任务，而是把这些异步任务都压成一个同步任务，在下一个 tick 执行完毕。

常见问题

nextTick 是微任务？是宏任务？

nextTick 默然是微任务，nextTick 提供了四种异步方法 Promise.then、MutationObserver、setImmediate、setTimeOut(fn,0)，默然优先选择微任务，也就是使用 Promise.then，如果不支持就会触发降级，依次降级； 但请注意，若降级到 setTimeOut 时，nextTick 就是「宏任务」了。

nextTick 为何默认用微任务？

按照事件循环的执行顺序，执行下一次「宏任务」之前会执行一次 UI 渲染，等待时长比微任务要多很多。所以在能使用微任务的时候优先使用微任务，不能使用微任务的时候才使用宏任务，实现优雅降级。

nextTick 的使用场景

1. 在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中。原因是 created() 钩子函数执行时DOM其实并未进行渲染。
2. 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作应该放在 Vue.nextTick() 的回调函数中。原因：Vue 异步执行 DOM 更新，只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变，如果同一个 watcher 被多次触发，只会被推入到队列中一次。

相关参考

Vue3官方中文文档 - nextTick

知乎 - Vue.nextTick的原理和用途

思否 - Vue之nextTick原理

掘金 - nextTick实现原理