Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to understand vue.js 's event cycle mechanism, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this vue.js event cycle mechanism. Let's take a look at it.

I. introduction of event cycle mechanism

JS is a single-threaded language, while browsers and Node.js define their own Event Loop (event Loop Mechanism) to solve asynchronous problems. The program is divided into "main thread (execution stack)" and "Event Loop thread". The "main thread" executes synchronous tasks from top to bottom, and "Event Loop thread" pushes asynchronous tasks into macro task queue and micro task queue to execute.

The event loop mechanism as a whole tells us the execution order of JavaScript code Event Loop, that is, event loop, which refers to a mechanism of browser or Node to solve the problem that javaScript single thread will not block when it runs, that is, we often use the principle of asynchronism. " The "Event Loop thread" first executes the macro task queue, and then executes the micro task queue. If the micro task generates a new micro task during execution, it continues to execute the micro task. After the micro task is finished, it goes back to the macro task for the next cycle. That is, continue to execute the macro task queue first, and then execute the micro task queue.

Macro tasks:

Script (overall code) / setTimeout/setInterval/setImmediate/ I Universe O / UI Rendering

Micro tasks:

Process.nextTick () / Promise/Async, Await (actually Promise) / MutationObserver (what's new in html5)

SetTimeout, setInterval and others are task sources, and it is the tasks they distribute that really enter the task queue.

Priority

SetTimeout = setInterval A queue setTimeout > setImmediate process.nextTick > Promise II. Classic event cycle test questions

1. The following code is a classic question about this type of question in the interview, including synchronous and asynchronous tasks, and the order of several outputs.

SetTimeout (function () {console.log ('1')}); new Promise (function (resolve) {console.log ('2'); resolve ();}). Then (function () {console.log ('3')}); console.log ('4'); / / 2jade 4jade

First of all, the tasks are divided, synchronization tasks: new Promise (), console.log ('4'); macro tasks: setTimeout (); micro tasks: Promise (). Then (); Event Loop pushes the synchronization tasks into the execution stack and executes them in turn, and when you encounter macro tasks or micro tasks, they are pushed to the macro task or micro task queue. First execute the synchronization task, the synchronization queue is completed, will go to the micro queue to fetch the task, until the micro queue is empty, and then go to the macro queue to fetch the task for execution. Therefore, the sequence of execution of the program is as follows:

New Promise (), console.log ('4'), Promise (). Then (), setTimeout ().

two。 Example 2

The answer output is: async2 end = > Promise = > async1 end = > promise1 = > promise2 = > setTimeout

3. Example 3

Mounted () {this.test ();}, methods: {test () {console.log ('script start'); this.async1 (); setTimeout (function () {console.log (' setTimeout')}, 0) New Promise (resolve = > {console.log ('Promise') resolve ()}) .then (function () {console.log (' promise1')}) .then (function () { Console.log ('promise2')}) console.log (' script end')} Async async1 () {await this.async2 () console.log ('async1 end')}, async async2 () {console.log (' async2 end')},}

The new version of chrome browser does not print like this, because chrome is optimized and await becomes faster, with the output as follows:

/ / script start = > async2 end = > Promise = > script end = > async1 end = > promise1 = > promise2

Analyze this code:

Execute the code and output script start.

Executing async1 () calls async2 () and then outputs async2 end, which preserves the context of the async1 function and then jumps out of the async1 function.

Encounter setTimeout and generate a macro task

Execute Promise and output Promise. Encounter then and generate the first micro task

Continue to execute the code and output script end

When the code logic execution is completed (the current macro task is finished), start executing the micro task queue generated by the current macro task and output promise1. The micro task encounters then and generates a new micro task.

Execute the generated micro-task, output promise2, and the current micro-task queue is completed. Executive power returns to async1

Executing await actually produces a promise return, that is,

Let promise_ = new Promise ((resolve,reject) {resolve (undefined)})

Execution completed, execute the statement after await, output async1 end, finally, execute the next macro task, that is, execute setTimeout, output setTimeout

Note that the above analysis is that the slow execution of the old browser await caused the async1 to execute after the micro task was executed.

This is the end of the article on "how to understand the event cycle mechanism of vue.js". Thank you for reading! I believe you all have a certain understanding of "how to understand the event cycle mechanism of vue.js". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.