vue中的虚拟dom转化为真实dom

1.创建虚拟节点Vnode的函数   createVNode()
2.在render中创建虚拟节点VNodes 
3.在createApp中把得到的虚拟节点挂载到根节点上去 

首先是写一个创建虚拟dom的函数

function createVNode(tag,props,children)
{
	return {tag,props,children}
}

然后在根组件中render函数中创建虚拟dom

return createVNode("div",{
                id:"app-id",
                class:"show"
            },[createVNode('p',null,"heihei"),createVNode("p",null,"hh")])
//这样返回的是一颗虚拟的dom树

然后在createApp函数中使用来自render返回的结果,将虚拟dom挂载

///这里需要引入把虚拟节点转换成为真是节点的函数mountElement
import { effect } from './reactivity/index.js'
import mountElement from './renderer/index.js'
export function createApp(rootComponent)
{
    return {
        //调用createApp方法返回一个mount对象
        mount(rootContainer)
        {
            //组件进入的时候调用组件的setup函数拿到组件的
            //一些依赖的值
            const context=rootComponent.setup();
            //然后执行effect函数进行第一次渲染和依赖的收集工作
            effect(()=>{
                rootContainer.innerText="";
                const subTree=rootComponent.render(context);
                mountElement(subTree,rootContainer)
            })
        }
    }
}

挂载函数mountElement

export default function mountElement(vnode,container)
{
    //vnode->tag,props,children

    //tag
    const {tag,props,children}=vnode;
    const element=document.createElement(tag);

    //props
    if(props)
    {
        //一个element可能有很多的prop,需要遍历
        for(const key in props)
        {
            const value=props[key];
            element.setAttribute(key,value);
        }
    }

    //children->可以字符串和 数组类型的children
    if(typeof children ==="string")
    {
        const textNode=document.createTextNode(children);
        element.append(textNode);
    }
    //children是一个数组
    else if(Array.isArray(children))
    {
        children.forEach(vnode=>{
            //在当前的element容器中递归调用‘
            //并且挂载到当前的容器上去
            mountElement(vnode,element);
        })
    }
    container.append(element);
}