浅析Vue.nextTick()原理

• 一、为何用Vue.nextTick()
• 二、什么是Vue.nextTick()
• 三、怎么用
• 四、小结

一、为何用Vue.nextTick()

首先来了解一下JS的运行机制。

JS运行机制（Event Loop）

JS执行是单线程的，它是基于事件循环的。

1. 全部同步任务都在主线程上执行，造成一个执行栈。
2. 主线程以外，会存在一个任务队列，只要异步任务有告终果，就在任务队列中放置一个事件。
3. 当执行栈中的全部同步任务执行完后，就会读取任务队列。那些对应的异步任务，会结束等待状态，进入执行栈。
4. 主线程不断重复第三步。

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

因为Vue DOM更新是异步执行的，即修改数据时，视图不会当即更新，而是会监听数据变化，并缓存在同一事件循环中，等同一数据循环中的全部数据变化完成以后，再统一进行视图更新。为了确保获得更新后的DOM，因此设置了 Vue.nextTick()方法。

二、什么是Vue.nextTick()

是Vue的核心方法之一，官方文档解释以下：

在下次DOM更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的DOM。

MutationObserver

先简单介绍下MutationObserver：MO是HTML5中的API，是一个用于监视DOM变更的接口，它能够监听一个DOM对象上发生的子节点删除、属性修改、文本内容修改等。

调用过程是要先给它绑定回调，获得MO实例，这个回调会在MO实例监听到变更时触发。这里MO的回调是放在microtask中执行的。

// 建立MO实例
const observer = new MutationObserver(callback)

const textNode = '想要监听的Don节点'

observer.observe(textNode, {
    characterData: true // 说明监听文本内容的修改
})

源码浅析

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中，咱们使用(宏)任务(与微任务结合使用)。
// 然而，当状态在从新绘制以前发生变化时，就会出现一些微妙的问题
// (例如#6813,out-in转换)。
// 一样，在事件处理程序中使用(宏)任务会致使一些奇怪的行为
// 所以，咱们如今再次在任何地方使用微任务。
// 优先使用 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)
    }
}

延迟调用优先级以下：
Promise > MutationObserver > setImmediate > setTimeout

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
        })
    }
}

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

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

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

附加

noop 的定义以下

/**
 * Perform no operation.
 * Stubbing args to make Flow happy without leaving useless transpiled code
 * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/).
 */
export function noop (a?: any, b?: any, c?: any) {}

三、怎么用

语法：Vue.nextTick([callback, context])

参数：

• {Function} [callback]：回调函数，不传时提供promise调用
• {Object} [context]：回调函数执行的上下文环境，不传默认是自动绑定到调用它的实例上。

//改变数据
vm.message = 'changed'

//想要当即使用更新后的DOM。这样不行，由于设置message后DOM尚未更新
console.log(vm.$el.textContent) // 并不会获得'changed'

//这样能够，nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
    // DOM 更新了
    //能够获得'changed'
    console.log(vm.$el.textContent)
})

// 做为一个 Promise 使用 即不传回调
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

Vue实例方法vm.$nextTick作了进一步封装，把context参数设置成当前Vue实例。

四、小结

使用Vue.nextTick()是为了能够获取更新后的DOM 。
触发时机：在同一事件循环中的数据变化后，DOM完成更新，当即执行Vue.nextTick()的回调。

同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发

应用场景：

• 在Vue生命周期的created()钩子函数进行的DOM操做必定要放在Vue.nextTick()的回调函数中。

  缘由：是created()钩子函数执行时DOM其实并未进行渲染。

• 在数据变化后要执行的某个操做，而这个操做须要使用随数据改变而改变的DOM结构的时候，这个操做应该放在Vue.nextTick()的回调函数中。

  缘由：Vue异步执行DOM更新，只要观察到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的全部数据改变，若是同一个watcher被屡次触发，只会被推入到队列中一次。

版本分析

2.6 版本优先使用 microtask 做为异步延迟包装器，且写法相对简单。而2.5 版本中，nextTick 的实现是 microTimerFunc、macroTimerFunc 组合实现的，延迟调用优先级是：Promise > setImmediate > MessageChannel > setTimeout，具体见源码。

2.5 版本在重绘以前状态改变时会有小问题（如 ＃6813）。此外，在事件处理程序中使用 macrotask 会致使一些没法规避的奇怪行为（如 #7109，＃7153等）。

microtask 在某些状况下也是会有问题的，由于 microtask 优先级比较高，事件会在顺序事件（如＃4521，＃6690 有变通方法）之间甚至在同一事件的冒泡过程当中触发（＃6566）。

参考：

• Vue源码
• Vue.js技术揭秘
• vue方法nextTick源码分析