What is the principle of Vue.$nextTick

This article mainly introduces the relevant knowledge about the principle of Vue.$nextTick. The content is detailed and easy to understand, and the operation is simple and fast. It has certain reference value. I believe everyone has read this article. There will be something to gain, let's take a look at it together.

DOM update mechanism in Vue

When you use Vue aggressively When I was in Hongtu, I suddenly found out, hey, I obviously changed this data, but when I got it, why was it the last value (I am lazy, so I won’t give specific examples?)

At this point, Vue will say: Xiaobian, you don’t understand this, my DOM is updated asynchronously! ! !

Simply speaking, Vue's responsiveness does not change the DOM immediately after the data changes, but updates the DOM according to a certain strategy. The advantage of this is that it can avoid some unnecessary operations on the DOM and improve rendering performance.

This is explained in the official Vue documentation:

Maybe you haven't noticed that Vue performs DOM updates asynchronously. As long as data changes are observed, Vue will start a queue and buffer all data changes that occur in the same event loop. If the same watcher is triggered multiple times, it will only be pushed into the queue once. This deduplication during buffering is very important to avoid unnecessary computation and DOM manipulation. Then, on the next event loop tick, Vue flushes the queue and performs the actual (deduplicated) work.

The vernacular is that, in fact, this is closely related to the event loop in JS, that is, it is impossible for Vue to render every data change, it will put these changes first In an asynchronous queue, it will also deduplicate the operations in this queue. For example, if you modify the data three times, it will only keep the last one. These changes can all be saved in the form of queues, so the question now is, when does Vue modify the DOM in the event loop?

Vue has two options, one is to perform a DOM update at the end of this event loop, and the other is to put the DOM update in the next round of event loop. z At this time, You Yuxi patted his chest and said: I have both methods! But because the final execution of this round of event loop will be much faster than the next round of event loop, so Vue prefers the first one, only The second mechanism is triggered when the environment does not support it. (The link at the beginning of ?? lets you understand the event loop)

Although the performance has been improved a lot, the problem will arise at this timeNow, we all know that in a round of event loop, the content in the asynchronous queue will be executed after the code in the synchronous execution stack is executed, so our operation of obtaining DOM is a synchronous one! ! Isn't it that although I have changed the data, its update is asynchronous, and when I get it, it has not had time to change it, so the problem at the beginning of the article will appear.

This. . . I really need to do this, so how do I do it? ?

It’s okay, You Da has provided us with Vue.$nextTick()

Vue.$nextTick()

In fact, you can explain $nextTick in one sentence: you put it in $nextTick The operations in it will not be executed immediately, but will be executed after the data update and DOM update are completed, so that what we get must be the latest.

To be more precise, the $nextTick method delays the callback until the next DOM update cycle. (If you don’t understand this sentence, you can read [狗头] above.)

We all understand the meaning, so how does $nextTick complete this magical function? The core is as follows:

Vue internally tries to use native Promise.then, MutationObserver and setImmediate, if the execution environment does not support it, setTimeout(fn, 0) will be used instead.

Look carefully at this sentence, you can find that this is not to use these asynchronous callback task queues of JavaScript to realize its own asynchronous callback queue in the Vue framework. This is actually a typical example of applying low-level JavaScript execution principles to concrete cases.

Let me summarize a little here: $nextTick puts the callback function in the microtask or macrotask to delay its execution sequence; (the summary is also lazy?)

It is important to understand the meaning of its three parameters in the source code:

• callback: the operation we want to perform can be placed in this function, we $n was not executed onceextTick will put the callback function into an asynchronous queue;

• pending: mark, used to determine whether it is the first time to join in an event loop , the asynchronous execution queue mount is triggered only when joining for the first time

• timerFunc: used to trigger the execution of the callback function, which is Promise.then Or the process of MutationObserver or setImmediate or setTimeout

After understanding, look at the whole The execution process in $nextTick is actually to push the callback functions in $nextTick one by one into the callback queue, and then wait for execution according to the nature of the event, when it is its turn When executing, just execute it, and then remove the corresponding event in the callback queue.

Use

Having said so much, how to use it? Very simple very simple

mounted: function () { this. $nextTick(function () { // Code that will run only after the // entire view has been rendered }) }

Using the scene

• created DOM operations need to use it

• It is our example above, if you want to get the latest value, use it

• There are also some third-party plug-ins used in the process of use, specific analysis of specific problems

supplement

strong>

Before, I couldn’t figure out a problem. $nextTick Since the method passed into it has been turned into a microtask, the execution order of it and other microtasks How is it?

This is simply a matter of who mounts the Promise object first.When the $nextTick method is used, the execution queue maintained inside its closure will be mounted to the Promise object. When the data is updated, Vue will first The $nextTick method will be executed, and then the execution queue will be mounted on the Promise object. In fact, I understand the Event Loop of Js model, regard the data update as a call of the $nextTick method, and understand that the $nextTick method will execute all pushed callbacks at one time, then You can understand the problem of execution order

The difference between $nextTick and nextTick is that nextTick has one more context parameter, Used to specify the context. But the essence of the two is the same, $nextTick is an instance method, and nextTick is just a static method of a class; one advantage of the instance method is that it is automatically bound to you as Call the this of the instance.

The content of this article about the principle of Vue.$nextTick is introduced here, thank you for reading! I believe that everyone has a certain understanding of the principle of Vue.$nextTick. If you want to learn more, please pay attention to the Yisu Cloud industry information channel.