Home » vue » Can anyone explain more on VueJS Async Update Queue?

Can anyone explain more on VueJS Async Update Queue?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am reading the vue official doc on Async Update Queue, and got confused on:

Whenever a data change is observed, it will open a queue and buffer
all the data changes that happen in the same event loop

what does it mean by the same event loop, are there gonna be multiple event loops at the same time? It also says the queue will be flushed in the next event loop “tick”, what does tick mean here? what if there is no next event loop or the next event loop never tick?

Answers:

Let me try answering this question as par my understanding.

what does it mean by the same event loop, are there gonna be multiple event loops at the same time?

Instead of applying each and every change in any vue property/method/variable to the view, vue saves all those changes in queue and flush those changes later. In this process of pushing the changes in the queue, it optimises by not re-rendering on each change as is commented here:

/**
 * Push a watcher into the watcher queue.
 * Jobs with duplicate IDs will be skipped unless it's
 * pushed when the queue is being flushed.
 */
export function queueWatcher (watcher: Watcher) {
  ...
  ...

the queue will be flushed in the next event loop “tick”, what does tick mean here?

Internally Vue tries native Promise.then and MutationObserver for the asynchronous queuing and falls back to setTimeout(fn, 0). Here you can see first preference for this is given to native Promise.then after that MutationObserver where native Promise is not available and in worst case fallback to setTimeout.