How does the Vue template run in the browser

First of all, throwing the template directly into the browser will definitely not work. The template is just for the convenience of developers to develop. Vue will use the compiler to finally compile the template into a render function through several stages, and then execute the render function to generate Virtual DOM and finally map it to the real DOM.

This compilation process is divided into three stages, namely:

1. Parse template into AST
2. Optimize AST
3. Convert AST to render function

In the first stage, the most important thing is to match the content in the template through a variety of regular expressions, and then extract the content for various logical operations, and then generate a basic AST object

{
    
    
	// 类型
	type: 1,
	// 标签
	tag,
	// 属性列表
	attrsList: attrs,
	// 属性映射
	attrsMap: makeAttrsMap(attrs),
	// 父节点
	parent,
	// 子节点
	children: []
}

Then it will further expand the AST based on the attributes in this most basic AST object.
Of course, during this stage, some other judgment logic will be carried out. For example, compare whether the opening and closing tags are the same before and after, determine whether there is only one root component, and determine whether it conforms to the HTML5 Content Model specification.

The next step is to optimize the AST. In the current version, the optimization content of Vue is actually not much. Only the static content of the node is extracted, that is, the node that will never change is extracted, and the function of reusing the Virtual DOM and skipping the comparison algorithm is realized. In the next major version, Vue will continue to work hard in the stage of optimizing the AST, realize more optimization functions, and squeeze more performance in the compilation stage as much as possible, such as extracting static attributes and other optimization behaviors.
The last stage is to generate the render function through AST. In fact, although there are many branches at this stage, the main purpose is to traverse the entire AST and generate different codes according to different conditions.

NextTick principle analysis

nextTick allows us to execute a delayed callback after the end of the next DOM update cycle to obtain the updated DOM.
Vue's realization of responsiveness does not mean that the DOM changes immediately after the data changes, but instead performs DOM updates asynchronously.

1. Vue performs dom updates asynchronously. Once a data change is observed, Vue will open a queue, and then push the watcher that observes the data change in the same event loop into this queue. If the watcher is triggered multiple times, it will only be triggered. Push to the queue once, this buffering behavior can effectively remove unnecessary calculations and dom operations caused by duplicate data, which can improve rendering efficiency.
2. If you want to get the updated dom element, you can use the built-in $nextTick method of vue, and the parameter is a function. Its role is similar to setTimeout, which performs asynchronous operations.

What is the operating mechanism of asynchronous execution? Teacher Ruan Yifeng summed it up like this:

(1) All synchronization tasks are executed on the main thread, forming an execution context stack.
(2) In addition to the main thread, there is also a "task queue". As long as the asynchronous task has a running result, an event is placed in the "task queue".
(3) Once all synchronization tasks in the "execution stack" are executed, the system will read the "task queue" to see what events are in it. Those corresponding asynchronous tasks then end the waiting state, enter the execution stack, and begin execution.
(4) The main thread keeps repeating the third step above.

The process of the main thread continuously performing tasks, acquiring tasks, performing tasks... is called the event loop

The principle of vue asynchronous update:

1. When the Data in Vue is modified, all Watchers related to this Data will be triggered to update.
2. First, all Watchers will be added to the Queue.
3. Then, call the nextTick method to execute the asynchronous task.
4. In the callback of the asynchronous task, sort the Watcher in the Queue, and then perform the corresponding DOM update.