Vue.nextTick 用法原理详解

用法:

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

疑惑:

怎么实现的延迟回调

原理:

  1. JavaScript语言的一大特点就是单线程,同一个时间只能做一件事
  2. JavaScript任务可以分为两种,一种是同步任务,一种是异步任务
  3. 异步任务大致分为,宏任务,和微任务
  4. 所有同步任务都在主线程上执行,形成一个执行栈
  5. 主线程之外,还存在一个”任务队列”(task queue)。只要异步任务有了运行结果,就在”任务队列”之中放置一个事件。
  6. 一旦”执行栈”中的所有同步任务执行完毕,系统就会读取”任务队列”中的微任务,其次是宏任务,看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
  7. 主线程不断重复上面的第6步。

vue实现:

vue 大多数情况下优先使用微任务, 在添加事件中使用宏任务 意思是在事件中使用Vue.nextTick 使用宏任务, 其他情况下使用微任务

vue nextTick 宏任务实现

  • 优先检测 setImmediate
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
}

setImmediate 浏览器支持情况 

  • 其次检测 MessageChannel 支持情况
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)
  }
} 

MessageChannel 浏览器支持情况 

  • 上面都不支持就使用最原始的setTimeout
 else {
  /* istanbul ignore next */
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

vue nextTick 微任务实现

  • 优先检测 Promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  microTimerFunc = () => {
    p.then(flushCallbacks)
    // in problematic UIWebViews, Promise.then doesn't completely break, but
    // it can get stuck in a weird state where callbacks are pushed into the
    // microtask queue but the queue isn't being flushed, until the browser
    // needs to do some other work, e.g. handle a timer. Therefore we can
    // "force" the microtask queue to be flushed by adding an empty timer.
    if (isIOS) setTimeout(noop)
  }
}

Promise 浏览器支持情况 

  • 如果不支持Promise, 还是使用宏任务
else {
  // fallback to macro
  microTimerFunc = macroTimerFunc
}

vue中什么地方用宏任务,什么地方用微任务?

从源码中可以看出,在DOM事件中使用Vue.nextTick 默认使用宏任务, 其他地方使用Vue.nextTick默认使用微任务。

其实从源码中注释中可以看出Vue最开始都是使用微任务方式,后面出现了bug,才引入了宏任务方式

// Here we have async deferring wrappers using both microtasks and (macro) tasks.
// In < 2.4 we used microtasks everywhere, but there are some scenarios where
// microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690) or even between bubbling of the same
// event (#6566). However, using (macro) tasks everywhere also has subtle problems
// when state is changed right before repaint (e.g. #6813, out-in transitions).
// Here we use microtask by default, but expose a way to force (macro) task when
// needed (e.g. in event handlers attached by v-on).

评论

还没有评论...留下你的评论!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Sidebar