This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging
The internal principles of VUE actually have many important parts, such as change detection, template compilation, virtualDOM, the overall running process, etc.
In this article, we will briefly explain template compilation.
The template in vue cannot be parsed and rendered by the browser, because it is not part of the browser standard and is not the correct HTML syntax. For example, we can use variables, expressions, or instructions in the template, which does not exist in HTML. So you need to convert the template into a JavaScript function, so the browser can execute this function and render the corresponding HTML element, and you can get the view running. This transformation process is called template compilation.
The function of template compilation is to generate the rendering function, which is executed to generate the latest vNode, and then render according to the vNode
Templates are compiled in three stages:
Parse: Parse a template string using a large number of regular expressions, turning tags, instructions, attributes, and so on into an abstract syntax tree AST.
Optimize: Iterate over the AST to find some static nodes and mark them up so that the diff comparison when the page is re-rendered can skip the static nodes and optimize Runtime performance.
Generate: Converts the final AST to a render function string.
So what is a template precompile?
For Vue components, template compilation is compiled only once when the component is instantiated, and not after rendering functions are generated. Therefore, compiling a component’s Runtime is a performance penalty.
The purpose of template compilation is only to convert the template to render function. This process can be completed in the process of project construction. In this way, the actual component can directly skip the template rendering in runtime, thus improving the performance. Precompile.