A microtask queue stores promise callbacks until the current synchronous JavaScript finishes. The event loop then moves queued callbacks onto the execution stack before it processes the next task, such as an event-handler callback. section 13.3.2
The simplified event-loop cycle handles the queue in this order:
- Execute every microtask in order, including microtasks added while earlier microtasks are running. section 13.3.3
- Execute the oldest task that was already present when the cycle began. section 13.3.3
- Allow the browser to render pending DOM changes, then begin another cycle while tasks remain. section 13.3.3
Async mounting callback
An async onMounted() hook runs synchronously until await fetch(...). The remaining statements—such as updating data and clearing loading—become a promise callback in the microtask queue. The mounting process continues first, so the component may be interactive before that callback runs. section 13.3.1
Promise syntax made visible
The same behavior can be written with fetch(...).then((data) => { ... }). The code before .then() executes immediately; the callback passed to .then() is deferred to the microtask queue. section 13.3.1
Figure 13.5 Execute all the microtasks in the microtask queue.
Use the event-loop figure to trace the point at which all pending microtasks execute before the oldest task. section 13.3.3
Because microtasks run before the next task and block JavaScript while executing, a long or poorly sequenced microtask chain can delay user interaction. This ordering also lets a scheduler defer lifecycle work until mounting has progressed. section 13.3.3 section 13.5
