Principle of Component Rendering Mechanism in Virtual DOM

Principle of Component Rendering Mechanism in Virtual DOM

The component rendering mechanism of the Virtual DOM refers to the process of describing the component tree through virtual nodes (VNodes) and converting components into real DOM. Its core lies in the creation of component-type VNodes, component instantiation, lifecycle management, and recursive rendering of child components. The following is a step-by-step analysis:

1. Creation of Component VNode

  • Description: The Virtual DOM distinguishes between ordinary element nodes (e.g., div) and component nodes (e.g., Vue components). A component VNode contains information such as the component definition (e.g., options object or functional component), props, children, etc.
  • Process:
    1. The compiler parses component tags in the template (e.g., <MyComponent>) into createVNode calls and marks the shapeFlag as COMPONENT (e.g., ShapeFlags.STATEFUL_COMPONENT in Vue 3).
    2. Example code: 
      // Creation of Component VNode  
const componentVNode = createVNode(MyComponent, { title: 'Example' }, children);

2. Component Instantiation and Initialization

  • Description: When rendering a component, it is necessary to instantiate the component object, handling props, state, lifecycle, etc.
  • Process:
    1. Instantiation: Create an instance based on the type of the component VNode (stateful component/functional component). For example, in Vue 3, createComponentInstance is called to generate an instance containing props, setup state, lifecycle queues, etc.
    2. Establishing Instance Relationships: Establish a bidirectional association between the instance and the VNode (vnode.component = instance).
    3. Initializing props and slots: Parse the props and children from the VNode and inject them into the instance.
    4. Executing Lifecycle Hooks: Such as beforeCreate, created (Vue 2) or setup (Vue 3).

3. Execution of Component Render Function and Generation of Child VNodes

  • Description: Call the component's render function (or the render function compiled from the template) to generate the subtree of child VNodes for that component.
  • Process:
    1. Execute the render function (e.g., setupRenderEffect in Vue 3), passing in props and slots, returning a VNode tree describing the component's internal structure.
    2. Example: 
      // Component internal render function  
const subtree = instance.render.call(instance.proxy);
    3. The generated subtree at this point is composed of ordinary element VNodes or other component VNodes, forming a nested structure.

4. Recursive Processing of Child VNodes

  • Description: Recursively patch the subtree generated by the component to convert it into real DOM.
  • Process:
    1. Call the patch function to process the subtree, following different logic based on the child VNode type:
      • If it is an element VNode, create the DOM element and set attributes.
      • If it is a component VNode, return to Step 2 to recursively instantiate the child component.
    2. Eventually, all components and elements are processed into real DOM, forming a complete DOM tree.

5. Lifecycle and Update Mechanism

  • Description: When a component mounts/updates, lifecycle hooks (e.g., mounted, updated) are triggered, and reactive updates are achieved through dependency tracking.
  • Process:
    1. After Mounting: After recursing to leaf elements, trigger the mounted hook in reverse order.
    2. Update Mechanism: If the reactive data the component depends on changes, trigger the component to re-render (generating a new subtree), and use a diff algorithm to compare the old and new VNodes, updating the DOM locally.

6. Special Handling of Functional Components

  • Description: Functional components have no instance; the function is directly executed to return a VNode.
  • Process:
    1. Call the functional component (e.g., const subtree = FunctionalComponent(props)).
    2. Directly patch the returned subtree, skipping the instantiation process for higher performance.

Summary

The Virtual DOM's component rendering mechanism enables declarative component-based development through describing the component tree with VNodes, managing state via instantiation, and recursively patching to generate DOM. Its advantages include:

  • Cross-platform: VNodes can be rendered into UI for different platforms (e.g., Web, mini-programs).
  • Efficient Updates: Minimizes DOM operations with the help of diff algorithms.
  • Logic Reusability: The component instantiation pattern encapsulates logic such as lifecycle and state management.