Vue源码阅读一：说说vue.nextTick实现

标签：循环   http   异步任务   undefined   alt   syn   pos   flush   wrap   

用法：

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

疑惑：

怎么实现的延迟回调

原理：

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

vue实现：

vue 大多数情况下优先使用微任务， 很少的地方使用宏任务

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

产考资料： JavaScript 运行机制详解：再谈Event Loop

Vue源码阅读一：说说vue.nextTick实现

标签：循环   http   异步任务   undefined   alt   syn   pos   flush   wrap   

原文地址：https://www.cnblogs.com/homehtml/p/11801626.html