Take you to have a deeper understanding of Vue.$nextTick (a brief analysis of the principle)

This article will share with you pure Vue information, introduce Vue.nextTick that you don’t know, and talk about the principles of Vue.$nextTick. I hope it will be helpful to everyone!

Principle things will have more words, please be patient and savor them carefully

DOM update mechanism in Vue

When you are using Vue aggressively to achieve your goals, you suddenly find that, hey, I have obviously changed this data, but when I get it, it is the last value (I am lazy, No specific examples?)

At this time, Vue will say: "Small, you don't understand this, my DOM is updated asynchronously!!!"

To put it simply, Vue's responsiveness does not mean that the DOM changes 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. [Related recommendations: vuejs video tutorial, web front-end development]

is explained in the official Vue documentation:

possibly If you haven't noticed yet, Vue performs DOM updates asynchronously. As long as data changes are observed, Vue will open 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 calculations and DOM operations. Then, on the next event loop "tick", Vue flushes the queue and performs the actual (deduplicated) work.

To put it bluntly, this is actually closely related to the event loop in JS. That is, Vue cannot render every data change. It will first put these changes in a In an asynchronous queue, it will also deduplicate the operations in the queue. For example, if you modify the data three times, it will only retain the last one. These changes can be saved in the form of a queue. Now the question comes, at what time in the event loop does Vue modify the DOM?

Vue has two options, one is to update the DOM at the end of this event loop, and the other is to put the DOM update in the next round of event loop. zAt this time, You Yuxi patted her 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, Vue gives priority to the first one. , the second mechanism is triggered only when the environment does not support it. (The link starting with ?? lets you understand the event loop)

Although the performance has been improved a lot, problems arise at this time. We all know that in a round of event loop, the code execution in the synchronous execution stack is completed. After that, the contents of the asynchronous queue will be executed, so our operation of obtaining the DOM is synchronous! ! Wouldn't that mean that although I have changed the data, its update is asynchronous, and when I obtain it, it has not had time to change, so the problem at the beginning of the article will occur.

this. . . I really need to do this, so what should I do? ?

It doesn’t matter, Youda very thoughtfully provided us with Vue.$nextTick()

Vue.$nextTick()

In fact, $nextTick can be explained clearly in one sentence: the operation you put in $nextTick will not be executed immediately, but will wait for data update and DOM Execute it after the update is completed, so that what we get is definitely 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 [dog head] above) We all understand the meaning of

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

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

Look at this sentence carefully, and you can find that this is not just using these asynchronous callback task queues of JavaScript to implement your own asynchronous callback queue in the Vue framework. This is actually a typical example of applying underlying JavaScript execution principles to a specific case.

Let me summarize it a little here: $nextTickPut the callback function into a micro-task or macro-task to delay its execution order; (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. If we do not execute it once $nextTick, the callback function will be placed in an asynchronous queue;
• pending: Identification, used to determine whether it is the first time to join in an event loop. The asynchronous execution of the queue mount is triggered only when the first time is added.
• timerFunc: used to trigger the execution of the callback function. That is, Promise.then or MutationObserver or setImmediate or setTimeout

After understanding the process, Looking at the entire execution process in $nextTick, it actually means pushing the callback functions in $nextTick one by one into the callback queue, and then waiting for execution according to the nature of the event until it is its turn When executing, 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
  })
}

Usage scenarios

• The operation of obtaining DOM in created requires using it

• is our example above. If you want to get the latest value, use it

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

ReferenceDetailed answers to front-end advanced interview questions

Supplement

I have been unable to do it before I understand a question, $nextTickSince the method passed in has been turned into a microtask, what is the execution order between it and other microtasks?

This is simply a question of who mounts the Promise object first. When the $nextTick method is called, the execution queue maintained inside its closure will be mounted. Loaded into the Promise object, when the data is updated, Vue will first execute the $nextTick method internally, and then mount the execution queue to the PromiseOn the object, in fact, after understanding the Event Loop model of Js, the data update is also regarded as a call to the $nextTick method, and ## The #$nextTick method will execute all pushed callbacks at once, so you can understand the issue of execution order

and the difference between

$nextTick and nextTick That is, nextTick has an additional context parameter 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 the class. One advantage of the instance method is that it is automatically bound to the calling instance for you. It’s just this.

(Learning video sharing:

vuejs introductory tutorial, Basic programming video)

The above is the detailed content of Take you to have a deeper understanding of Vue.$nextTick (a brief analysis of the principle). For more information, please follow other related articles on the PHP Chinese website!