vue将虚拟 Dom 转化为真实 Dom

{tag: 'DIV',attrs:{id:'app'},children: [{tag: 'SPAN',children: [{ tag: 'A', children: [] }]},{tag: 'SPAN',children: [{ tag: 'A', children: [] },{ tag: 'A', children: [] }]}]
}把上面虚拟Dom转化成下方真实Dom<div id="app"><span><a></a></span><span><a></a><a></a></span>
</div>

实现

// 真正的渲染函数
function _render(vnode) {// 如果是数字类型转化为字符串if (typeof vnode === "number") {vnode = String(vnode);}// 字符串类型直接就是文本节点if (typeof vnode === "string") {return document.createTextNode(vnode);}// 普通DOMconst dom = document.createElement(vnode.tag);if (vnode.attrs) {// 遍历属性Object.keys(vnode.attrs).forEach((key) => {const value = vnode.attrs[key];dom.setAttribute(key, value);});}// 子数组进行递归操作vnode.children.forEach((child) => dom.appendChild(_render(child)));return dom;
}