An overview of

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:

  1. What is the DOM update loop?
  2. When is the next update cycle?
  3. After modifying the data, does it speed up the data update progress?
  4. Under what circumstances should it be used?

The principle of

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) In addition to the main thread, there is a task queue. Whenever an asynchronous task has a result, an event is placed in the “task queue”. (3) Once all synchronization tasks in the “execution stack” are completed, the system reads the “task queue” to see what events are in it. Those corresponding asynchronous tasks then end the wait state, enter the execution stack, and start executing. (4) The main thread repeats step 3 above.

The diagram below shows the main thread and the task queue.

Event Loop Description

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.

Examples from Zhihu:

// Change the data
vm.message = 'changed'

// You want to use the updated DOM immediately. This doesn't work because the DOM hasn't been updated since message was set
console.log(vm.$el.textContent) // Will not get 'changed'

// The code in nextTick will be executed after DOM updates
Vue.nextTick(function(){
    console.log(vm.$el.textContent) // Get 'changed'
})
Copy the code

Illustration:

Event loop:

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

  1. 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.
  2. 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

After the next DOM update loop is complete

At this point, vue. nextTick is used to obtain the changed DOM. 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.