How are components rendered in VUe3.0?

The template of the component determines the DOM tag generated by the component, and within vue.js, a component needs to go through the steps of “create VNode-render vNode-generate DOM” to actually render the DOM.

The following figure illustrates the component rendering process:

Source code address:

packages/runtime-dom/src/index.ts

packages/runtime-core/src/apiCreateApp.ts

packages/runtime-core/src/vnode.ts 

packages/runtime-core/src/renderer.ts

packages/runtime-dom/src/nodeOps.ts