Template compilation and componentization of VUE source code

The role of template compilation

Instead of writing a complex render function, you simply write an HTML-like -vuejs template that the compiler converts into a VNode render function

The.vue file will be converted to the render function by Webpack during the build process, requiring vueloader

tips

When using VUe2, the text content of the tag should not be added with extra white space and newline content. The render function of VUe2 will be output as is, which will increase the memory consumption. Vue3 optimizes this problem

Entry to template compilation

About compileToFunctions

You can find a compileToFunctions in our entry file entry-Runtime-with-Compiler. js

compileToFunctionsThe template () function compiles template torender.staticRenderFnsAnd return
compileToFunctionsThe core is to find the compiled result in the cache, return it if there is one, compile it if there is none, and convert the compiled string code to function form, and then cache and return it
1. Fetch the CompiledFunctionResult object from the cache, if any returns directly
2. Compile the template into a compiled object (render, staticRenderFns), a string of JS code
```
const compiled = compile(template, options)
...
Copy the code
```
3. Call createFunction to convert string code to JS methods
4. Cache and return res objects (render, staticRenderFns method)

About the createCompiler(baseOptions) function

`createCompiler(baseOptions)`The function returns`compileToFunctions`function

baseOptionsIs defined in the platform-specific options, SRC \platforms\ Web \ Compiler \options.js
This function defines the compile function, which combines options, calls baseCompile to compile, logs errors, and returns the compiled object

Return {compile, compileToFunctions}

return {
  compile,
  compileToFunctions: createCompileToFunctionFn(compile)
}
Copy the code

CompileToFunctions are portals to template compilation

About createCompilerCreator(function baseCompile ()) function

`createCompilerCreator(function baseCompile ())`The function returns`createCompiler`function

CreateCompilerCreator tobaseCompileFunctions are parameters
baseCompileThe function does something inside about the abstract syntax tree AST
- Convert templates into ast abstract syntax trees – parse parse
- Optimize abstract syntax tree — Optimize Optimize
- Generate js code to convert the abstract syntax tree into a string
- Return ast/render /staticRenderFns (static render function, generating static VNode tree)
returncreateCompilerfunction

The template is converted to parse of the AST abstract syntax tree

The parse function calls the parseHTML method to iterate through the HTML template string and convert the HTML template string into an AST object. Similar to a normal object, attributes and instructions in THE HTML are recorded on the AST object

Optimize abstract syntax tree

The purpose of optimization is to mark static nodes in the abstract syntax tree. After marking, there is no need to re-render in the future. These static subtrees can be directly skipped during patch

Static nodes: parts of DOM that never needs to change

Static root node: the tag contains child tags and no dynamic content, that is, it contains pure text content. If the tag contains only plain text content and no child tags, vUE will not optimize

Convert abstract syntax tree to string form js code generate

The process of compiling templates

Template compilation is the final conversion of template strings into rendering functions

The template string is first converted into an AST object, and then the AST object is optimized. The optimization process is essentially marking static nodes and static root nodes, and then the optimized AST object is converted into string code. Finally, the string code is converted into anonymous functions using new Function(). This anonymous function is the resulting render function

conclusion

Let’s start with the entry functions for template compilationcompileToFunctions
- Start by loading the compiled render function from the cache
- Call if not in the cachecompile(template, options)Begin to compile
incompileFunction (core is merging options)
- The first step is to merge baseOptions with the options passed in
- And then callbaseCompile(template.trim(), finalOptions)To compile templates
The real processing is inbaseCompileCompletes the three things that are at the heart of template compilation
- The template is converted to parse of the AST abstract syntax tree
  - Parse () — Converts template into an AST syntax tree
- Optimize abstract syntax tree
  - Flags static nodes and static root nodes in the AST syntax tree
  - These static nodes are skipped during patch(), so you don’t need to regenerate nodes every time you re-render
- Generate code for converting an optimized AST object into a string form
baseCompileWhen it’s done, it goes back tocompileToFunctions
- Continue to convert generated string form JS code into function form by callingcreateFunction
- createFunctionIs called at the bottom ofnew Function()
- Finally cache and return
```
Return (cache[key] = res);Copy the code
```
- Call outcompileToFunctionsRender and staticRenderFns are initialized and will eventually be mounted to the options properties of the Vue instance

Template compilation will mark in the process of static root node, optimize the static root node processing, rendering afresh don’t need to deal with the static root node, because the content will not change the template don’t write too much meaningless blank and newlines, generate ast objects will leave these blank and newlines, will be put into memory, Rendering to the browser doesn’t make any sense

Componentization review

The core components of Vue are data binding and componentization

A Vue component is a Vue instance with predefined options
A component can form a fully functional area on a page, and a component can contain scripts, styles, and templates

The component registration

Component Registration

The internal implementation of the global component Vue.components is implemented via vue.extend
Local components

Vue. The extend (extendOptions) implementation

The component constructor is created based on the passed option object. The component constructor inherits from the Vue constructor through prototype inheritance, so the component object has the same members as the Vue instance. The core code is as follows

Const Sub = function VueComponent (options) {// Call _init() to initialize this._init(options)} // Prototype inherits from Vue _init() was previously injected on the vue prototype, so _init() can be accessed in sub, So you can access _init() in VueComponent sub.prototype = object.create (super.prototype) // All components inherit from vue and Super is vue Sub. Prototype. Constructor = Sub Sub. Cid = cid++. / / the cache to use Sub options = mergeOptions (Super) options, extendOptions ) Sub['super'] = SuperCopy the code

The component creation process

Review the first rendering process

The Vue constructor is called first, in the constructorthis._init()
this._init()Is finally calledthis.$mount()Go to the mount
this.$mount()Call themountComponent()
mountComponentIn went to create the render Watchernew Watcher()
Create render Watchernew Watcher()Is passed a parameterupdateComponent
whileupdateComponentIs finally calledvm._updateandvm._render()

UpdateComponent = () => {vm._update(vm._render(), hydrating)}Copy the code

vm._render()Call the render function, passed in by the user or generated by compilation, in the render functioncreateElement()The Vnode object is created

`createElement()`And finally called`createComponent()`

CreateComponent () converts the component to a Vnode object
This function goes through internallyinstallComponentHooks()->componentVNodeHooksInitialize four hook functions and create component objects (component instances) in the init hook function
The init() hook function is called during patch()

Component creation and mounting

Create parent to child, mount child to parent