nextTick实现原理

发表于 更新于 分类于 ，

大纲

前言

  • vue版本：2.6.9；
  • path：vue/src/core/util/next-tick.js；

 

nextTick的实现逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const callbacks = []
let pending = false

export 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
    timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

进入nextTick，首先会点cb进行封装，涉及三个控制流！

  1. 如果存在cb，则调用cb函数：cb.call(ctx)；
  2. 如果_resolve存在，则调用 _resolve(ctx)，_resolve是Promise.resolve的引用！这是在当前环境支持Promise；
  3. 不做任何处理。

在将cb推入callbacks后，判断当前是不是正在执行上次callbacks的回调函数，根据pending（待定）来判断，当前是否要执行新的callbacks的cb！

先假设当前pending = fakse，那么进入if (!pending)，执行timerFunc()！

 

timerFunc是什么？

timerFunc，是一个可将当前callbacks作为一个回调函数（这个包裹的函数就是下面的flushCallbacks），入队微/宏任务队列中，等待主线程代码执行完毕之后执行！

1
2
3
4
5
6
7
8
9
10
11
12
13
function flushCallbacks () {
  // 立刻执行 “pending = false” 意味着，在主线程代码执行完，
  // 轮到当前这个 “flushCallbacks()” 被放入主线程执行开始
  // 就可以进入 "if (!pending)" 控制流再次执行触发 “timerFunc()”，
  // 将新的“flushCallbacks” 放进微/宏任务队列
  // 而不是等到 上一次 “callbacks” 的所有cb执行完之后
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

timerFunc根据当前环境的支持情况可能用Promise、MutationObserver、setImmediate、setTimeout实现！优先级：Promise > MutationObserver > setImmediate > setTimeout。

  • 微任务（micro task）：Promise、MutationObserver；
  • 宏任务（macro task）：setImmediate、setTimeout。

任务调用优先级：微任务 > 宏任务。

关于为什么这样的优先级，vue做了说明：

Here we have async deferring wrappers using microtasks. In 2.5 we used (macro) tasks (in combination with microtasks).However, it has subtle problems when state is changed right before repaint(e.g. #6813, out-in transitions).Also, using (macro) tasks in event handler would cause some weird behaviors that cannot be circumvented (e.g. #7109, #7153, #7546, #7834, #8109). So we now use microtasks everywhere, again.A major drawback of this tradeoff is that there are some scenarios where microtasks have too high a priority and fire in between supposedly sequential events (e.g. #4521, #6690, which have workarounds) or even between bubbling of the same event (#6566).

这里我们使用微任务异步延迟包装器。在2.5中，我们使用了（宏）任务（与微任务结合使用），但是当重新绘制之前状态发生改变时它存在一些细微的问题（例如＃6813，输出转换）。在事件处理程序中使用（宏）任务会导致一些无法避免的怪异行为（例如＃7109，＃7153，＃7546，＃7834，＃8109）。因此，我们现在再次在各处使用微任务。 是在某些情况下，微任务的优先级过高，并且在假定的顺序事件之间（例如＃4521，＃6690，它们具有变通方法）甚至在同一事件冒泡之间也会触发（＃6566）。

&nbsp;

timerFunc的实现

1
let timerFunc

Promise实现timerFunc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    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.
    // 在有问题的UIWebViews中，Promise.then并不会完全中断，但是它可能会陷入一种怪异的状态，
    // 在这种状态中，回调被推送到微任务队列中，但是队列没有被刷新，直到浏览器需要执行其他一些工作，
    // 例如 处理一个计时器。 因此，我们可以通过添加空计时器来“强制”刷新微任务队列。
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
}

MutationObserver实现timerFunc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // Use MutationObserver where native Promise is not available,
  // e.g. PhantomJS, iOS7, Android 4.4
  // (#6466 MutationObserver is unreliable in IE11)
  // 在本地Promise不可用的地方使用MutationObserver，
  // e.g. PhantomJS, iOS7, Android 4.4
  // （＃6466 MutationObserver在IE11中不可靠）
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
}

setImmediate实现timerFunc

1
2
3
4
5
6
7
8
9
10
11
else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // Fallback to setImmediate.
  // Techinically it leverages the (macro) task queue,
  // but it is still a better choice than setTimeout.
  // 退回到setImmediate。
  // 从技术上讲，它利用（宏）任务队列，
  // 但它仍然是比setTimeout更好的选择。
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
}

setTimeout实现timerFunc

1
2
3
4
5
6
else {
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}