nexttick principle in vue

The implementation of the nexttick principle in vue is based on Vue. The responsiveness does not mean that the DOM changes immediately after the data changes, but the DOM is updated according to a certain strategy.

1. Principle

1. Asynchronous description

Vue implements responsiveness not after the data changes The DOM changes immediately, but the DOM is updated according to a certain strategy.

2. Event loop description

Simply put, after Vue modifies the data, the view will not be updated immediately, but will wait until all data changes in the same event loop are completed. Then update the view uniformly.

eg:

Illustration:

Event loop:

One tick (this update cycle)

1. First modify the data, which is a synchronization task. All synchronization tasks in the same event loop are executed on the main thread, forming an execution stack. The DOM is not involved at this time.

2.Vue opens an asynchronous queue and buffers the events that occur in this event loop. All data changes. If the same watcher is triggered multiple times, it will only be pushed into the queue once.

The second tick (‘next update cycle’)

After the synchronization task is executed, the asynchronous watcher queue task starts to be executed and the DOM is updated. Vue internally tries to use the native Promise.then and MessageChannel methods for asynchronous queues. If the execution environment does not support it, setTimeout(fn, 0) will be used instead.

The third tick (after the next DOM update cycle ends)

2. Application scenarios and reasons

1. Performed in the created() hook function of the Vue life cycle DOM operations must be placed in the callback function of Vue.nextTick().

When the created() hook function is executed, the DOM is not actually rendered at all, and DOM operations at this time are in vain, so the js code for DOM operations must be put into Vue.nextTick here. () in the callback function. Corresponding to this is the mounted() hook function, because all DOM mounting and rendering have been completed when this hook function is executed. At this time, there will be no problem in performing any DOM operations in this hook function.

2. When an operation needs to be performed after the data changes, and this operation requires the use of a DOM structure that changes with the data change, this operation should be put into the callback function of Vue.nextTick() .

The specific reasons are explained in detail in Vue’s official documentation:

Vue performs DOM updates asynchronously. As soon 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 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. Vue internally tries to use native Promise.then and MessageChannel for asynchronous queues. If the execution environment does not support it, setTimeout(fn, 0) will be used instead.

For example, when you set vm.someData = 'new value', the component will not re-render immediately. When the queue is flushed, the component is updated on the next "tick" when the event loop queue is cleared. Most of the time we don't need to worry about this process, but if you want to do something after the DOM state is updated, it can be a bit tricky. While Vue.js generally encourages developers to think in a "data-driven" way and avoid touching the DOM directly, there are times when we really need to do that. To wait for Vue to finish updating the DOM after the data changes, you can use Vue.nextTick(callback) immediately after the data changes. This callback function will be called after the DOM update is completed.

The above is the detailed content of nexttick principle in vue. For more information, please follow other related articles on the PHP Chinese website!