A brief version of the rendering process of vue2 and vue3

---

vue2 rendering process

In the rendering process of Vue 2, the following key steps are included:

1. Parsing templates: Vue 2 uses templates based on HTML syntax. First, the templates are parsed into an abstract syntax tree (AST) for subsequent compilation and rendering processes.

2. Compile template: compile the parsed abstract syntax tree into a rendering function. The compilation process includes operations such as static markup, generating reusable rendering functions, and handling dynamic binding.

• The static marking phase traverses the abstract syntax tree and marks the static nodes in it. These nodes can be skipped during re-rendering, thereby improving rendering performance.
• The stage of generating reusable rendering functions will convert the remaining dynamic nodes into JavaScript rendering functions. These functions receive data as input parameters and return virtual DOM (Virtual DOM).
• The dynamic binding stage will associate the nodes with dynamic binding with the corresponding responsive data, and when the data changes, the re-rendering process will be triggered.

3. Create an instance: Create a component instance through the Vue constructor and initialize related properties and events.

4. Data responsive: Vue uses a two-way binding mechanism to automatically update the corresponding view when the data changes. During the rendering process, Vue will set a listener for each responsive data object, and when the data changes, it will trigger the re-rendering process.

5. Rendering virtual DOM: Vue generates virtual DOM (Virtual DOM) according to the rendering function. Virtual DOM is a lightweight JavaScript object used to represent the real DOM structure.

The Diff algorithm will compare the nodes of the old and new virtual DOM trees layer by layer to find out the nodes that need to be updated.
Using keys to uniquely identify nodes can help the Diff algorithm find differences more accurately.

6. Diff algorithm: Before re-rendering, Vue will compare the virtual DOM, and find out the parts that need to be updated through the Diff algorithm. The Diff algorithm will efficiently find the differences, minimize DOM operations, and improve rendering performance.

7. Apply update: According to the result of the Diff algorithm, Vue will only update some DOM nodes that need to be modified, instead of re-rendering the entire view. This reduces unnecessary calculations and DOM manipulations and improves performance.

8. Post-update hook: After completing the DOM update, Vue will trigger the corresponding lifecycle hook function, such as updated, for developers to perform follow-up operations or handle side effects.

The above is a brief rendering process of Vue 2. By parsing templates into rendering functions, creating instances, generating virtual DOM, and updating differences, Vue can efficiently implement data-driven view updates.

vue3 rendering process

In Vue 3, the rendering process mainly includes the following steps:

1. Parsing templates: Vue 3 uses the compiler to parse templates into render functions, which is done during the build phase. The rendering function can be understood as a JavaScript function for generating virtual DOM.

2. Create responsive data: Vue 3 uses the reactive() function to process data reactively. This function converts the data into a responsive object, so that when the data changes, it can trigger the re-rendering of the view.

3. Initialize component instance: When creating a component instance, Vue 3 will perform a series of initialization operations, including setting the initial state of the component, injecting dependencies, etc.

4. Render virtual DOM: call the rendering function to generate a virtual DOM (VNode). Virtual DOM is a lightweight JavaScript object that describes the elements and their properties to be rendered on the page.

5. Compare and update: Vue 3 compares the old and new virtual DOM through algorithm optimization to find out the differences between the two. This process is called virtual DOM diff. Then, make targeted updates based on the differences.

6. Generate real DOM: According to the latest virtual DOM, Vue 3 will create or update the real DOM.

7. Insert the real DOM into the page: After updating the real DOM, Vue 3 inserts it into the page, and the user finally sees this updated page.

8. Monitor data changes: After the component instance is mounted on the page, Vue 3 will automatically establish a data observer mechanism. When the data changes, it will notify the relevant dependencies to re-render.

Optimize and expand

In the rendering process of Vue 3, in addition to the steps mentioned above, there are some optimizations and expansions:

1. Compilation optimization: Vue 3 uses Static Template Hoisting technology to convert static nodes into constants and reduce unnecessary calculations during rendering. In this way, the overhead of the generation and comparison process of the virtual DOM can be reduced, and the performance can be improved.

2. Marking optimization: Vue 3 introduces incremental static marking (Incremental Static Marking). Through hierarchical and incremental marking, templates are marked as static nodes, nodes that need dynamic tracking, and nodes that may generate dynamic content. Further reduce unnecessary update operations.

3. Static promotion: Vue 3 can promote static nodes to avoid repeated creation and comparison. This means that when re-rendering, Vue 3 can directly reuse the previously generated static nodes without regenerating and comparing.

4. Fragments: Vue 3 supports Fragments (fragments), which can render multiple root-level elements inside the component without wrapping additional parent elements. This allows for more flexible organization of the structure of components.

5. Suspense: Vue 3 introduces the Suspense mechanism for handling the rendering of asynchronous components. Through Suspense, a custom waiting interface can be displayed during asynchronous component loading to improve user experience.

6. Teleport: Vue 3 provides the Teleport function, which can render the content of the component to other locations in the DOM structure without being limited by the nesting level of the component. This is very useful when dealing with modal boxes, popup menus, etc.

Vue 3 has optimized various aspects in the rendering process, including compilation optimization, markup optimization, static improvement, etc., to improve the overall performance. In addition, some new features such as Fragments, Suspense and Teleport have been introduced to provide developers with more flexible and convenient rendering methods.

Comparison between vue2 and vue3

Vue 3 uses techniques such as static template promotion and compile-time optimization to make the entire rendering process more efficient and has better performance than Vue 2. At the same time, Vue 3 also introduces incremental static markup, which can further reduce unnecessary update operations and improve rendering performance.

The rendering process of Vue 3 includes parsing templates, creating responsive data, initializing component instances, rendering virtual DOM, comparing and updating, generating real DOM, inserting real DOM into the page, and monitoring data changes. By comparing the difference between the old and new virtual DOM, Vue 3 can efficiently update the page and provide responsive data binding.