Analysis of the principle of Vue nextTick

Friends who have used Vue know that nextTick in Vue can get the updated DOM. Today I will explain what nextTick does.

Before we start, we need to know a concept, which is Event Loop.

Event Loop

Event Loop is translated as event loop. An Event Loop will include one or more task queues. The continuous thread will take out the earliest task from the queue for execution. The taken task is called macroTask. Each macroTask has a task source. After each macroTask is processed, the next earliest macroTask will be taken out from the queue and re-executed.

Task source:

```
    1. script
    2. Events 3. Dom Interaction 4. I/O
    5. UI Render
    6. setTimeout
    7. setInterval
    8. requestAnimationFrame
    .....
```

That is to say, when encountering the above situations, a macroTask will be generated and pushed into the queue.

miscroTask (microtask)

After executing each macroTask, the main thread will check whether the microTask under the macroTask is empty. If it is not empty, it will be taken out in chronological order from early to late. If a new microTask is encountered on the way, it will continue to push the microTask into the microTask queue.

UI Render (Key Points)

As the miscroTask queue is cleared, the main thread will execute UI Render, that is, render the interface. However, the browser does not necessarily render the interface every time under the UI Render task. It depends on the situation. Now mainstream browsers generally render at a refresh rate of 60HZ, that is, 16.7ms (not an accurate estimate). A macroTask is usually less than 16.7ms, so the browser will render according to the situation each time.

Summarize the next cycle

1. Take out the earliest added task from the macroTask queue
2. Start executing the task. If a new macroTask is encountered during the process, it will be added to the end of the macroTask queue.
3. After executing the macroTask, the event loop will look for the microTask queue
4. Similarly, if a new microTask is encountered on the way, it will be placed at the end of the microTask queue under the macroTask.
5. After executing microTask, UI Render macroTask will be executed
6. The browser will decide whether to update the DOM based on the current situation, usually at a frequency of 60HZ
7. At this point, an event loop ends

nextTick

We start analyzing nextTick

According to the above figure, we can see several ways to write nextTick:

    1. this.$nextTick(cb)
    2. this.$nextTick().then(cb)

All cb will be put into the callbacks array, waiting for a one-time call. In the figure above, we can see that the callback is mainly called by the timerFunc function. Let's focus on this function below. First, look at the source code

We can see that timerFunc has different assignments in different situations

First, it will determine whether the browser supports the promise attribute. If it does, timerFunc will be assigned to Promise. There is a small problem here. That is, under iOS, although there is a Promise object and it will be pushed into the microTask queue, the queue will not be updated. At this time, you need to add a macroTask to force a refresh of the microTask queue.

MutationObserver, I believe many people are not aware of this API, this is an API that can monitor DOM changes, and belongs to microTask, with a lower priority than Promise. After creating a new text node, manually change its text node to trigger the microTask,

There is a small problem here:

If the text node is rendered successfully, does it mean that other DOM renderings are successful?

This is an alternative solution, mainly because it is a microtask, so it is used, not because it monitors the DOM

After all microtasks fail, the next best option is to choose setImmediate, which is an API that only high-version IE and Edge browsers may have. It is mainly used when calculating large amounts of data.

Finally, setTimeout

After reading this, do you have any doubts?

The above code does not indicate that nextTick is executed after listening to DOM updates? What???? My head went blank at that moment.

Then the next thing is the most important

The DOM Tree is updated in real time. The DOM Tree is updated in real time. The DOM Tree is updated in real time. I repeat this three times. This means that you don’t need to monitor DOM updates. Your operations on the DOM can get real-time feedback. The previous line of code operates the DOM, and the next line can get it.

Then some people will be confused, what exactly does nextTick do?

The role of nextTick is to take out the collection Watcher from the queue one by one and change the data to render the DOM at one time. We know that the cost of operating the DOM is expensive. When a browser opens a web page, it will start a process, which is composed of threads.

1. GUI rendering thread
2. js engine thread (main thread)
3. EventLoop training thread
4. Other threads, such as network

Cross-thread operations are expensive, so rendering the DOM in one go can effectively optimize performance! !

Summarize

NextTick is not used to monitor DOM changes, because DOM changes can be obtained in real time. Its function is to change data once and render DOM.

The above is the detailed analysis of the principle of Vue nextTick. For more information about the principle of Vue nextTick, please pay attention to other related articles on 123WORDPRESS.COM!