An overview of

Take a look at the official documentation

  • Usage: A deferred callback is performed after the next DOM update loop ends. Use this method immediately after modifying the data to get the updated DOM.

  • Question: What is the DOM update loop? When is the next update cycle? After modifying the data, does it speed up the data update progress? Under what circumstances should it be used?

Asynchronous instructions

The Vue implementation is responsive, not that the DOM changes immediately after the data changes, but that the DOM is updated according to a certain strategy. In the documentation for the Vue, it is stated that the Vue performs DOM updates asynchronously. For an explanation of asynchrony, check out this article by Ruan Yifeng. Key excerpts are as follows:

In particular, asynchronous execution works as follows.

(1) All synchronization tasks are executed on the main thread, forming an execution context stack. (2) There is another one outside the main thread"Task queue"Task Queue. As soon as the asynchronous task has the result of running, in"Task queue"Place an event in. (3) once"Execution stack"After all synchronization tasks are completed, the system reads the data"Task queue"See what's going on in there. Those corresponding asynchronous tasks then end the wait state, enter the execution stack, and start executing. (4) The main thread repeats step 3 above. `Copy the code

In simple terms, Vue does not update the view immediately after the data is changed. Instead, it updates the view after all the data changes in the same event loop are complete.

The illustration

Event loop:

First tick (the first step in the legend, ‘this update loop’) :

First modify the data, which is a synchronization task. All synchronization tasks for the same event loop are executed on the main thread, forming a stack of executions, before DOM is involved. Vue opens an asynchronous queue and buffers any data changes that occur in this event loop. If the same watcher is triggered more than once, it will only be pushed into the queue once. Second tick (the second step in the legend, i.e. ‘next update loop’) :

When the synchronization task is complete, the asynchronous Watcher queue starts to execute tasks and update the DOM. Vue internally tries to use the native Promise.then and MessageChannel methods for asynchronous queues, or setTimeout(fn, 0) instead if the execution environment does not support it.

Third tick (the third step in the legend) :

This is what the documentation says

At the end of the next DOM update cycle, the changed DOM is obtained through vue. nextTick. This can also be obtained by setTimeout(fn, 0).

A brief summary of the event loop:

Synchronous code execution -> Find asynchronous queue, push execution stack, execute vue.nexttick [event loop 1] -> Find asynchronous queue, push execution stack, execute Vue.nexttick [Event loop 2]…

In short, asynchrony is a separate tick and does not occur in the same tick as synchronization, which is why the DOM does not change immediately.

use

Application scenario: Operations need to be performed based on the new view after the view is updated.

Created, mounted

Note that the nextTick method is also used in the Created and Mounted phases if you need to manipulate a post-rendered attempt.

Official documentation:

Note that Mounted does not promise that all child components will also be mounted together. If you want to wait until the entire view is rendered, replace Mounted with vm.$nextTick

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

Other Application Scenarios

Other application scenarios are as follows:

  • Example 1:

Click the button to display the input box that was hidden with V-show = false and get focus.

showsou(){
  this.showit = true// modify v-show document.getelementById ("keywords").focus() // In the first tick, the input box is not available, so the focus is not available}Copy the code

Is amended as:

showsou(){
  this.showit = true
  this.$nextTick(function() {// DOM updated document.getelementById ()"keywords").focus()
  })
}
Copy the code
  • Example 2:

Click to get the element width.

<div id="app">
    <p ref="myWidth" v-if="showMe">{{ message }}</p>
    <button @click="getMyWidth"</button> </div>getMyWidth() {
    this.showMe = true;
    //this.message = this.$refs.myWidth.offsetWidth; // TypeError: this.$refs.myWidth is undefined
    this.$nextTick(()=>{// this. Message = this.$refs.myWidth.offsetWidth; })}Copy the code
  • Example 3:

Use the Swiper plugin to request images through Ajax after the slide problem.

Reprinted from segmentfault.com/a/119000001…