40_虚拟DOM

本题考点：createElement、setAttribute、appendChild、createTextNode、遍历

根据题目要求，将虚拟DOM转换为真实DOM结构并返回，核心步骤有：

1. 析构对象参数中的tag、props、children、text值
2. 当tag的数据类型为”string“时，通过tag标签创建新节点并且挂载在vnode对象参数的el属性上
3. 再通过setAttribute函数给vnode.el节点设置属性
4. 然后通过appendChild、createTextNode将当前节点对象的text内容插入vnode.el节点上
5. 最后通过createElm函数递归children数组重复以上过程
6. 当tag的数据类型不为string时，直接通过createTextNode创建文本节点

参考答案：

const _createElm = vnode => {
    let { tag, props, children, text } = vnode
    if (typeof tag == "string") {
        vnode.el = document.createElement(tag)
        _setAttr(vnode.el,props)
        vnode.el.appendChild(document.createTextNode(text))
        children.forEach(child => {
            vnode.el.appendChild(_createElm(child))
        })
    } else {
        vnode.el = document.createTextNode(text)
    }
    return vnode.el
}
const _setAttr = (elem, attrs) => {
    for(key in attrs){
        elem.setAttribute(key,attrs[key])
    }
}