Analysis of Next and Tick (Nexttick) in Vue

This article mainly introduces the next and tick in Vue (nexttick) analysis, has a certain reference value, now share to everyone, the need for friends can refer to

Objective

Before this I was not how to read the Vue source code, but saw the source code and then produced a number of questions, if you do not see the source code I really do not have any doubt to use Nexttick, because I only know I want to get updated DOM I write a callback in it, just write it right, One day curious debugging the next code to find some questions ....

When did you start this tick?

Baidu Search event loops can see a lot of articles, but read a lot of articles did not let me know or the author did not go to explain when to start the first tick, but also lucky, or someone skycity clearly said, the impression before the Nuggets have an article in the comments I also got the answer, The answer is to start with the global script and start the first tick

When does this tick end?

This is me, too. According to the search data, when the GUI finishes rendering the tick end, but before the start of rendering the JS engine will execute all the micro-task queue, the new name is jobs, the macro task is called tasks

What do you do after a tick ends?

Continue to find the event task queue for tasks, if not wait silently, if any, continue to start the second round tick, remove the tasks execution
I drew a diagram to indicate the next process.

This conclusion is what I feel right at the moment and I hope that there is something wrong with the discussion.

What does next refer to?

According to the official website explanation

the deferred callback is executed after the next DOM update loop ends. Use this method immediately after modifying the data to get the updated DOM.

I personally do not understand what this next Dom update loop refers to? Is this the event loop? When does this DOM update cycle start? When does it end? Want someone to know the explanation under. I think the timing of the callback is executed before the next tick, and you can see the following code
Suppose there's this line of code in the HTML<p ref="msg">{{msg}}</p>
We do it in mounted.

this.msg = ' Hello '; $nextTick (() =>{    Console.log (this. $refs. msg.innerhtml)})

The above code in the Vue inside the following execution process is as follows

Through the above process analysis, the callback inside the Nexttick is executed within the current time loop and is not executed in the next event loop. So, the DOM is really up-to-date when the next event loop executes, but the callback is not executed in the next event loop.

Summarize

The callback in 1.nextTick is executed in the tick loop.
2. All micro-tasks will be completed in this round tick
3. Any macro task, that is, tasks is not executed in a tick, but in a different tick

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!

Related recommendations:

How to use Vue+mock.js to build an independent development environment for the front end

Vue built-in Components transition (graphic)