源码在src/core/util/next-tick.js下

用法

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

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

原理

vue 在内部实现了一个任务队列, 在当前的事件循环结束后去执行任务队列里的回调函数(这个浏览器或者node的事件队里其实差不多).

在调用$nextTick函数的时候, 会将回调函数push到之前定义的callbacks中.然后在当前的事件循环结束后去调用它们.那么重点来了, Vue是如何判断事件循环结束了的呢?

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
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}
  1. window.setImmediate()
    该方法用来把一些需要长时间运行的操作放在一个回调函数里,在浏览器完成后面的其他语句后,就立刻执行这个回调函数.不过这个只能在ie中用

    if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
      macroTimerFunc = () => {
        setImmediate(flushCallbacks)
      }
    }

https://developer.mozilla.org...

  1. channel message api

    该方法主要用于不同的上下文之间的通信.
    else if (typeof MessageChannel !== 'undefined' && (
     isNative(MessageChannel) ||
     // PhantomJS
     MessageChannel.toString() === '[object MessageChannelConstructor]'
    )) {
     const channel = new MessageChannel()
     const port = channel.port2
     channel.port1.onmessage = flushCallbacks
     macroTimerFunc = () => {
       port.postMessage(1)
     }
    }
  2. setTimeout

    else {
     /* istanbul ignore next */
     macroTimerFunc = () => {
       setTimeout(flushCallbacks, 0)
     }
    }

本文固定链接: http://www.js-code.com/vue-js/vue-js_25864.html