About the Cycle of Events

Check out these articles

The Event Loop mechanism in JavaScript

Explain the Event Loop mechanism in JavaScript

Macro and micro tasks

Vue $nextTick implementation

  • Greater than 2.6

$nextTick source >2.6

Fix: Always use microtasks for nextTick #8450

Promise, MutationObserver, setImmediate, and setTimeout are used

  • Less than 2.6 and greater than or equal to 2.5

$nextTick source >2.5

SetImmediate, MessageChannel, setTimeout, and Promise are used

Commit records :fix: Use MessageChannel for nextTick

  • Less than 2.5

$nextTick source <2.5

Promise, MutationObserver and setTimeout are used

2.6.x version implementation

There’s a whole bunch of notes here, so LET me translate.

Here we have asynchronous delay wrappers that use microtasks. In version 2.5, we used (macro) quests (combined with micro quests). 2.5x, in turn, uses setImmediate, MessageChannel, setTimeout, promise), but there are subtle issues with changing state before redrawing.

For example (e.g. #6813, out-of-in transitions, note: this is a problem I really don’t see, v-show is a redraw (display:none), v-if is a reconfiguration). Using (macro) tasks in event handlers can cause some strange behavior. We can’t get around that (e.g. #7109, #7153, #7546, #7834, #8109, note: I only saw #7546, in version 2.5 it is true that iPad and iPhone do need to click twice to bring up the keyboard, in version 2.4 it only needs to click once), So we now use microtasks everywhere. A major disadvantage of this trade-off is that in some scenarios, microtasks take too high a priority and can go wrong between complex events (e.g. #4521, #6690, which have workarounds), even between two bubbles of the same event (#6566).

fire in between supposedly sequential events or even between bubbling of the same event

This sentence does not translate into English, ah ah ah

The nextTick behavior utilizes microtask queues, which can be accessed through native Promise.then or MutationObserver. MutationObserver has more extensive support, but in iOS >= 9.3.3 UIWebView, it is seriously bugged when triggering touch events. After triggering a few times, it stops working completely…… So, if there’s a Promise that supports native, we’ll use promises.

In the case of the UIWebViews in question, promise.then doesn’t crash completely, but it might get stuck in a weird state where callbacks are pushed to the microtask queue, but the queue isn’t refreshed until the browser needs to do something else, such as handle a timer. So we can “force” the microtask queue to be flushed by adding an empty time.

Little surprise

I found that Vue decides whether native is supported or not

function isNative (Ctor) {
  return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
}
isNative(Promise)
isNative(MutationObserver)
isNative(setImmediate)
Copy the code

Anyway, I can’t think of writing this, cry ~

Leave it to your own thinking

# 7546. For this question, I haven’t figured it out yet from the source code, why the iPad version 2.4 requires only one click, version 2.5 requires two clicks, whoo-hoo. The difference between the two versions

  • Version 2.4 uses setImmediate, MessageChannel, setTimeout, promise, etc.
  • Version 2.5 uses Promise, MutationObserver, setImmediate, and setTimeout in that order

Other links

MutationObserver

MessageChannel

Vue. Js upgrade pit tips

Briefly understand nextTick in Vue

Event loop simulation site

Hu Yu’s blog

There are mistakes above, please point out, welcome to add