foreword
In the process of learning Vue, everyone must have used nextTick(). Everyone must know the timing of using nextTick(). So how does it work? This article briefly talks about the work of its nextTick() principle.
When to use nextTick
First remember: the callback specified by nextTick will be executed after the browser finishes updating the DOM.
for example:
In a single-page application I made myself, I have a need to update the page immediately after requesting data from the backend. For example, if I want to click the delete operation in the operation, the front end will send a request to the back end after deleting the data, and the back end will return the data after deleting the data. If we want to display it on the page immediately, what should we do?
Maybe many people will do what I did for the first time. For example, my page is displayed by traversing the data with v-for. Maybe many people will directly reassign the data returned by the front end to data. But this is absolutely not acceptable! This will only cause the data to actually change, but the view will not change, because vue updates the dom asynchronously, and it is impossible to update the page immediately after assigning a value through the synchronous code. So even if the deletion is successful, the page will not be displayed. Even if it shows that the deletion is successful, the page will not be updated.
how to update
Our requirement is to update the page immediately after requesting data back. First, understand a few points.
1. Vue update Dom is an asynchronous update.
As shown in the description on the official website, let me explain this passage. It may be confusing to read directly. The first two sentences are about synchronization and asynchrony, as well as the "event loop" mentioned. This starts with the operating mechanism of JS, poke me go to . The third sentence, "If the same watcher is triggered multiple times, it will only be pushed into the queue once", what does this mean? It can also be found in my article, click me to go .
2. Understand the timing of execution
After reading the above two articles, you should know about macrotasks and microtasks, and inside nextTick is the mechanism of calling macrotasks and microtasks to complete event calls, so that the callback in nextTick is executed at the end of an event loop . Why at the end? At the end means after all asynchronous tasks, remember the previous point, "vue updates Dom is an asynchronous update", and we put the callback in nextTick at the end of all asynchronous tasks, which explains the first sentence , the callback specified by nextTick will be executed after the browser finishes updating the DOM.
3. Go back to the example to realize the requirements
We want to achieve the requirements. In this example, we use hot update, that is, only local components are updated.
I directly put all my sub-components in router-view, and update the components by changing v-if.
Seeing this, some people may ask, isn’t this just setting v-if to false first, and then setting it to true to achieve it? Whether it is the same as nextTick or not, then it is a big mistake to think this way.
Remember what I just said " If the same watcher is triggered multiple times, it will only be pushed into the queue once ", that article has already explained that Vue will execute all the codes before rendering the page, so we The two this.$isRouterAlive = false and this.$isRouterAlive = true are equivalent to only executing the last one, which is equal to true, and false has never been executed, so it is equivalent to not doing anything, the original is true, and it is still true now.
Adding a nextTick is different. This code is equivalent to telling vue, vue, you first help me execute this.$isRouterAlive = false, don’t care about the things in my nextTick, you go to render and finally execute my nextTick code.
In this way, everyone will understand better, this.$isRouterAlive = true is executed after the page is rendered, so we can see with the naked eye that the goods have actually been deleted, and the page will be updated immediately. In fact, the router-view The subcomponents in the router are canceled, that is, v-if = false, and then v-if = true, then everyone knows that v-if is created, which is equivalent to recreating the content in router-view, so at this time The data is also up to date.