Virtual DOM uses JS to describe real DOM and components, and Vue renders real pages through Virtual DOM.

< div class = "a" id = "b" > < / div > {I am content tag: 'div', / / the element tag attrs: {/ / attribute class: 'a', id: 'b'}, text: 'I am content, // Children :[] // children}Copy the code

This is a simple example of a Virtual DOM, but a real DOM has far more properties than a Virtual DOM.

A real DOM has this property, and updating the DOM frequently in real development is bound to cause performance problems. Virtual DOM is to use a JS object to describe a DOM, compared to the real DOM is much easier.

export const createVNode = (__DEV__ ? createVNodeWithArgsTransform : _createVNode) as typeof _createVNode function _createVNode( type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT, props: (Data & VNodeProps) | null = null, children: unknown = null, patchFlag: number = 0, dynamicProps: string[] | null = null, isBlockNode = false ): VNode {// Determine what type VNode is const shapeFlag = isString(type)? ShapeFlags.ELEMENT : __FEATURE_SUSPENSE__ && isSuspense(type) ? ShapeFlags.SUSPENSE : isTeleport(type) ? ShapeFlags.TELEPORT : isObject(type) ? ShapeFlags.STATEFUL_COMPONENT : isFunction(type) ? Shapeflags. FUNCTIONAL_COMPONENT: 0 // Create vnode const vnode: vnode = {__v_isVNode: true, __v_skip: true, type, props, key: props && normalizeKey(props), ref: props && normalizeRef(props), scopeId: currentScopeId, slotScopeIds: null, children: null, component: null, suspense: null, ssContent: null, ssFallback: null, dirs: null, transition: null, el: null, anchor: null, target: null, targetAnchor: null, staticCount: 0, shapeFlag, patchFlag, dynamicProps, dynamicChildren: null, appContext: Null} // normalizeChildren(vnode, children) return vnode}Copy the code

The above is the process of creating a Vnode. First determine the type of a vnode, create a VNode object, and standardize the child node.