The original rational things will be more words, please bear down, savor

At the same time, this article is built on the basis of understanding the JS Event Loop, so if you do not understand the Event Loop, you can read my other article 👉👉, after reading the Event Loop, you must understand the gold (juejin. Cn).

DOM update mechanism in Vue

When you aggressively use Vue for your grand plan, you suddenly realize, wow, I obviously changed this data, but when I get it is the last value (I am lazy, I will not give specific examples 👵).

Vue will say: “DOM updates asynchronously!!”

To put it simply, the responsiveness of a Vue is not to change the DOM immediately after the data changes, but to update the DOM according to a certain strategy. This has the advantage of avoiding unnecessary DOM manipulation and improving rendering performance.

In the official Vue documentation it is stated as follows:

In case you haven’t noticed, Vue performs DOM updates asynchronously. Whenever a data change is observed, Vue opens a queue and buffers all data changes that occur in the same event loop. If the same watcher is triggered more than once, it will only be pushed into the queue once. This removal of duplicate data while buffering is important to avoid unnecessary computation and DOM manipulation. Then, in the next event loop, “TICK,” Vue refreshes the queue and performs the actual (de-duplicated) work.

If you want to know more about the principle of Vue DOM update, you can read this article Vue asynchronous DOM update principle – Zhihu.com

Vernacular point is, in fact, this is the event loop and JS are closely linked, Vue is impossible to do a render each data changes, it will put these changes in an asynchronous queue, at the same time it also goes to the operation of the inside this queue to heavy, such as you modify the data three times, it will only keep the last time. These changes can be stored in queues, so the question now is, at what point in the event cycle does vUE modify the DOM?

The Vue has two options, one is to perform a DOM update at the end of the event cycle, or to place the DOM update in the next event cycle. Then Yuxi patted his chest and said, “I have both!” However, because the current event loop ends up executing much faster than the next event loop, Vue prefers the first mechanism and triggers the second mechanism only when the environment does not support it. (The link at the beginning of 👆👆 gives you an idea of the event loop.)

Although performance has improved a lot, but this time the problem appears, we know that in a round of events, the synchronous stack of code execution is completed, the asynchronous queue will execute the content of the DOM is a synchronous operation!! Although I have changed the data, but its update is asynchronous, and WHEN I get it, it has not changed, so there will be the problem at the beginning of the article.

This is… I really need to do this, how about this?

Vue.$nextTick()

Vue.$nextTick()

$nextTick: The actions you place in $nextTick will not be executed immediately. Instead, they will be executed after the data update and DOM update is complete, so that we are sure to get the latest one.

More precisely, the $nextTick method delays the callback until after the next DOM update cycle. (Don’t understand this sentence, you can see above [dog head])

So how does $nextTick accomplish this magical function? The core is as follows:

Vue internally attempts to use native Promise.then, MutationObserver, and setImmediate for asynchronous queues, and setTimeout(fn, 0) instead if the execution environment does not support it.

If you look closely at this statement, you can see that this is not just using JavaScript’s asynchronous callback task queue to implement the Vue framework’s own asynchronous callback queue. This is a typical example of applying low-level JavaScript execution principles to a specific case.

Vue $nextTick principle – cloud + community – Tencent Cloud (tencent.com) is very clear

Let me summarize a little bit here: $nextTick puts the callback function in the microtask or macro task 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, which we did not perform once$nextTickThe callback function is placed in an asynchronous queue;
  • Pending: Indicates whether the queue is mounted asynchronously for the first time in an event loop
  • TimerFunc: used to trigger the execution of the callback function, i.ePromise.thenorMutationObserverorsetImmediate 或setTimeoutThe process of

$nextTick ($nextTick, $nextTick, $nextTick, $nextTick, $nextTick, $nextTick, $nextTick, $nextTick, $nextTick, $nextTick, $nextTick)

use

Having said all that, how do you use it? Very simple, very simple

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

Usage scenarios

  1. It is required for the DOM retrieval operation in CREATED
  2. This is our example above, which you use if you want to get the latest value
  3. There are some third-party plug-ins in the process of use, the use of the situation, specific problems specific analysis

supplement

I’ve been having a hard time figuring out how $nextTick works with other microtasks since it turns its incoming methods into microtasks.

This is simply a matter of who mounts the Promise object first. When the $nextTick method is called, the execution queue maintained within its closure is mounted to the Promise object. When the data is updated, the Vue executes the $nextTick method first, and then mounts the execution queue to the Promise object. In fact, after understanding the Js Event Loop model, the data update is also a call to the $nextTick method, and understand that the $nextTick method executes all the pushed callbacks at once, you can understand the execution order problem

And the difference between $nextTick and nextTick is that nextTick has a context parameter that specifies the context. $nextTick is an instance method, and nextTick is a static method of the class. An advantage of the instance method is that it automatically gives you this bound to the calling instance.

Why Vue uses asynchronous rendering – WindrunnerMax – Cnblogs.com