虚拟节点转化为实际节点

将虚拟节点转化为实际节点，重要的是需要递归处理数据

实现思路：

1. 如果传入数字转化为字符串
2. 如果是字符串，直接创建一个文本节点
3. 如果是对象递归处理数据

完整代码

function _render (vnode) {
    if (typeof vnode === 'number') {
        vnode = vnode.toString();
    }
    if (typeof vnode === 'string') {
        // 如果是字符串，直接传建一个文本节点返回
        return document.createTextNode(vnode);
    }
    // 创建元素
    const dom = document.createElement(vnode.tag);
    if (vnode.attrs) {
        Object.keys(vnode.attrs).forEach(key => {
            let value = vnode.attrs[key];
            // 将属性挂载在元素上
            dom.setAttribute(key, value);
        });
    }
    if (vnode.children && vnode.children.length) {
        // 递归处理子数据
        vnode.children.forEach(child => {
            child = _render(child);
            dom.appendChild(child);
        });
    }
    return dom;
}

let vnode = {
    tag: 'DIV',
    attrs: {
        id: 'app'
    },
    children: [
        {
            tag: 'SPAN',
            attrs: {
                style: 'width: 100px',
                text: '11'
            },
            children: [
                { tag: 'A', children: [] }
            ]
        },
        {
            tag: 'SPAN',
            children: [
                { tag: 'A', children: [] },
                { tag: 'A', children: [] }
            ]
        }
    ]
};
console.log(_render(vnode));
console.log(_render(1));

上述关于虚拟节点转化为实际节点的实现是自己学习的记录，更详细的实现方法大家可以看一下最新的前端大厂面经（详解答案） - 掘金 (juejin.cn)