graph LR
VNode["VNode"]
createElement["createElement"]
createComponent["createComponent"]
patch["patch"]
patchVnode["patchVnode"]
updateChildren["updateChildren"]
createElm["createElm"]
initComponent["initComponent"]
createElement -- "instantiates" --> VNode
createElement -- "calls" --> createComponent
patch -- "calls" --> patchVnode
patch -- "calls" --> createElm
patchVnode -- "calls" --> updateChildren
patchVnode -- "calls" --> createElm
createElm -- "calls" --> initComponent
The Virtual DOM (VDOM) Manager subsystem is responsible for the efficient creation, manipulation, and updating of the Virtual DOM, thereby minimizing direct interactions with the real DOM for performance optimization. Its core functionality revolves around representing the UI as a lightweight VDOM tree, comparing changes between VDOM trees, and applying only necessary updates to the actual browser DOM.
The fundamental data structure representing a virtual DOM node. It encapsulates properties like tag, data, children, and component options, serving as the blueprint for the virtual representation of the UI.
Related Classes/Methods:
Orchestrates the creation of Virtual DOM nodes (VNodes). It serves as the primary API for constructing the VDOM tree, handling various node types (elements, components, text, empty nodes). This is the entry point for building the virtual representation.
Related Classes/Methods:
Specifically handles the creation of VNodes that represent Vue components. This includes resolving component options and preparing the VNode for component instantiation, integrating Vue's component model with the VDOM.
Related Classes/Methods:
The core diffing and patching algorithm. It compares an old VDOM tree with a new one and efficiently applies only the necessary changes to the real DOM, minimizing direct DOM manipulations. This is the central update mechanism.
Related Classes/Methods:
Compares two individual VNodes (old and new) and applies the necessary updates to their corresponding real DOM element. It's a recursive function central to the patching process, handling node-level differences.
Related Classes/Methods:
Implements the sophisticated diffing algorithm for child node lists. It optimizes DOM updates by efficiently reusing, moving, or removing existing elements based on keys and node types, crucial for list rendering performance.
Related Classes/Methods:
Responsible for the actual creation of real DOM elements based on a given VNode. It's the bridge between the virtual representation and the physical DOM, performing the actual browser API calls.
Related Classes/Methods:
Initializes a component instance during the patching process, attaching the component instance to its VNode. This is crucial for component lifecycle management and data reactivity within the VDOM update cycle.
Related Classes/Methods: