JS execution is single threaded, and it is based on event loops. The event loop is roughly divided into the following steps:
All synchronization tasks are executed on the main thread, forming an execution stack.
In addition to the main thread, there is a “task queue”. Event callbacks are placed in the “task queue” as soon as the asynchronous task has run results.
Once all the synchronized tasks in the execution stack have been executed, the system reads the “task queue” and puts any events into the main thread for execution.
Repeat these three steps over and over again
The main thread executes as a tick, and all asynchronous results are scheduled via a “task queue”. The task queue stores individual tasks. The specification specifies that tasks are divided into two categories, namely Macro Task and Micro Task, and that after each macro task is finished, the micro task is polled, that is, the micro task is executed.
In the browser environment, the most common macro tasks are setTimeout, MessageChannel, postMessage, and setImmediate; Common microtasks are MutationObsever and promise.then.
nextTick
Where to use
global-api/indes.js Vue.nextTick = nextTick
instance/render.js Vue.prototype.$nextTick = function (fn: Function) {return nextTick(fn, this)}
Vue internally tries to use native Promise. Then, MutationObserver, and setImmediate for asynchronous queues, and if the execution environment does not support it, setTimeout(fn, 0) is used instead.
flushCallbacks
conclusion
1. NextTick two ways to call a direct CB a promise after the callback.
2. For direct CB, we first throw a callback function into the callbacks array. The contents of the cb function are executed by try and catch to ensure that the contents of the CB function are not reported. Initial Pending is false first set to true and execute timeFunc. TimeFunc executes flushCallbacks, depending on how the browser supports calls that don’t work. FlushCallbacks first turn on the pending set to false, then a copy of final callbacks array traversal execute callback function.
3. For a promise, insert _resolve into the callbacks array. _resolve is the value assigned to the new promise. Initial Pending is false first set to true and execute timeFunc. TimeFunc executes flushCallbacks, depending on how the browser supports calls that don’t work. FlushCallbacks first flushCallbacks sets pending to false, copies an array of Callbacks, returns reslove, and executes the.then callback.
4. Through the analysis of nextTick in this section and the set analysis in the previous section, we know that the data change to DOM rerendering is an asynchronous process that occurs in the nextTick. This is what we usually do in the development process, such as fetching data from the server interface, when the data is changed, if some of our methods depend on the DOM change of the data, we have to execute after nextTick.
