Why write this article

In order to consolidate their knowledge; 2. Share some of my experience, hoping to help other students who have had this problem. If there is something wrong, please point it out.

Before introducing nextTick, let’s take a look at the JS task queue

Macro task

SetTimeout 2. SetInterval 3. SetImmediate

2. Micro-task

Then () => new Promise(() => // Then () => // Here is)

3. Synchronization tasks

// The code is executed from top to bottom, and only after the current code has been executed does the next operation occur

Function fun(){console.log(' start 1 time '); } fun(); // Because js is executed from top to bottom, it will be executed at this point first; Console. log(' start executing ~ ') // This will be executed after the above function completes;Copy the code

Fourth, so what is the order of js task execution?

// Perform synchronization tasks by priority (highest priority) > micro-task > macro-task

Function fun(){// Synchronize task console.log(' start 1 time '); // Sync task} new Promise(resolve => {// sync task console.log(' I'll do it first '); Resolve (' Until I execute '); }). Then (data => {// async task console.log(data); = > {}) setTimeout () / / macro task console. The log (' I am a macro task); }, 0) fun(); // Synchronization task console.log(' Start executing ~ '); // Synchronize tasksCopy the code

// I execute first // start executing once // start executing ~ // until I execute // I am a macro task

What is the point of this example? Instructions, we at the time of writing code, the code sequence is important, of course important, if you have two tasks, and then task B is dependent on the task A, that this time will need to perform A first in B, but we want to consider what good place with micro tasks, using macro task where where using synchronization task

How does Vue’s nextTick work? Is it a synchronous task, a micro task, or a macro task?

Let’s take a look at the vue source code is how to write

In the screenshot above we see that the first parameter that nextTick passes in, our execution method, is put into the Callbacks array, which is a queue of execution that vue implements internally. Let’s move on

FlushCallbacks (” flushCallbacks “) flushCallbacks (” flushCallbacks “) flushCallbacks (” flushCallbacks “) flushCallbacks (” flushCallbacks “) flushCallbacks (” flushCallbacks “) flushCallbacks (” flushCallbacks “) flushCallbacks (” flushCallbacks “) flushCallbacks (” flushCallbacks “) flushCallbacks (” flushCallbacks “) flushCallbacks (” flushCallbacks “) flushCallbacks (” flushCallbacks “) flushCallbacks

Let’s look at this screenshot below, will find that in fact the whole task queue is put in a micro task queue to perform, so see everybody here should be understood nextTick inside the queue is actually stored in the micro task queue and executed, but callbacks itself is not a small task himself is a sync task, This time we used in the code, for example, if you still follows the child components in the parent component, and child components and micro task exists, this time there will be a problem, namely micro tasks are executed in sequence, finished your nextTick execution in the parent component has found some subcomponents information didn’t win, At this point, you can use a macro task instead of nextTick. Let’s look at another example;

This is a demo that you can copy and run yourself

< div id = "demo" > < h1 > asynchronous update < / h1 > < p id = "p1" > {{foo}} < / p > < / div > < script > / / create an instance of const app = new Vue ({el: '# demo, data: { foo: 'ready~~' }, mounted() { this.foo = Math.random() console.log('1:' + this.foo); this.foo = Math.random() console.log('2:' + this.foo); this.foo = Math.random() console.log('3:' + this.foo); // Asynchronous behavior, Console. log(' p1.innerhtml :' + p1.innerhtml) // promise.resolve ().then(() => {// // is the latest value // Console. log(' p1.innerhtml :' + p1.innerhtml) //}) this.$nextTick(() => {console.log(' p1.innerhtml :' + p1.innerhtml :') p1.innerHTML) }) } }); </script>Copy the code

In this example console.log() is a synchronization task; The synchronization task takes precedence over microtasks and macros, so console.log() and this.foo are executed first. If we print p1. innerHTML with the original value, Since vue will put the update operation on the task queue, we print with the this.$nextTick() callback. At this point, the nextTick is actually a task queue, and we append our callback function to the task queue until our synchronization task queue completes

Here is the end of the introduction, if you have any ideas can also comment on the message, common discussion; Recently in the arrangement of their own learning vue3 article interested friends can study together to discuss vuE2 learning vuE3 use will continue to update