An overview,
Figure 1: VUE template rendering process
As can be seen from the figure, template rendering process goes through data processing (initState), template compileToFunctions to generate render, render function to generate virtual DOM, virtual DOM mapping to real DOM (patch) to mount to page. These functions play a key role in the data rendering process. Therefore, this paper starts from these functions, in-depth research on the principle of VUE data rendering to the page.
What is the Virtual DOM?
2.1 Causes of virtual DOM
Figure 2: DOM element attributes
Figure 3: Browser rendering flow
Figure 4: Virtual DOM instance
Figure 5: Virtual DOM mapping to real DOM
2.2 Main ideas of Virtual DOM
Figure 6: Schematic diagram of Vitual DOM generating DOM
Figure 7: Schematic diagram of virtual DOM update
Figure 8: Vitrual DOM in vue
Data rendering process
3.1 Data Binding Implementation Logic —- initState
Figure 9: The Vue constructor
Figure 10: instance
Figure 11: initState function
Figure 12: Proxy functions
Figure 13: Data binding process
3.2 Render function —- render
3.2.1 Treatment of EL
Figure 14: $mount function
Figure 15: The Query function
3.2.2 Template content extraction
Figure 16: Handwritten Render function
Figure 17: Template processing
Figure 18: The first form of template
Figure 19: idToTemplate function
Figure 20: The second form of template
Figure 21: El element content extraction
Figure 22: The getOuterHTML function
The real example we originally provided fits into category (3). After the above logic, the template variable should ideally be a template string as shown below at this point, which will be used to generate the render function.
Figure 22: Extracted template strings
Figure 23: Template extraction
3.2.3 Template compiles into render function
Figure 23: Compilation process
Figure 24: parseHTML pseudocode
Figure 25: Advance function
Figure 26: Advance function execution diagram
Figure 27: Parse flow chart
Figure 28: AST tree structure
Figure 29: Optimize process
Figure 30: CodeGen process
Figure 31: The render function generated after compilation
Figure 32: Compiling the Render function
3.3 Render to VNode generation
Figure 33: initRender function
Figure 34: createElement function
Figure 35: VNode instantiation
Figure 36: Generated VNode
Figure 37: Flow diagram of the createElement function
3.3 Mapping virtual DOM to real DOM —- Patch
Figure 38: _update function
Figure 39: nodeOps
Figure 40: modules
Figure 41: patch function
Figure 42: patch function
Figure 43: createElm function
Figure 44: Creating child nodes
Figure 45: Insert node
Figure 46: Delete the original node
Four,
- New Vue, performs initialization, binds the incoming data to the current instance, and accesses the incoming data as this.message. This is done by executing the initData() function.
- Mount the $mount method and generate the Render function with custom Render methods, template, el, etc. If a template is passed in, compile the contents of the template into the render function, otherwise compile the contents of the element corresponding to the el into the render function. Compilation is done by calling compileToFunctions. You can also write the render function by hand to reduce compiling. The render function has the highest priority, followed by template, which needs to be compiled into a rendering function. The outerHTML can be compiled and rendered only when the element corresponding to the mount point EL attribute does not exist.
- After the render function is generated, the _createElement function is called to generate the VNode.
- Map the virtual DOM to a real DOM page.