请实现一个简单的虚拟 DOM 库，包括创建虚拟节点、渲染虚拟节点到真实 DOM 的功能。

Question

Accepted Answer

以下是一个简单的虚拟 DOM 库的实现。首先，定义一个函数来创建虚拟节点：
javascript
function createElement(type, props, ...children) {
    return {
        type,
        props: props || {},
        children
    };
}

这个函数接受元素类型、属性和子节点作为参数，返回一个虚拟节点对象。接下来，实现将虚拟节点渲染到真实 DOM 的函数：
javascript
function render(vnode, container) {
    if (typeof vnode === 'string') {
        const textNode = document.createTextNode(vnode);
        container.appendChild(textNode);
        return;
    }
    const element = document.createElement(vnode.type);
    for (const [key, value] of Object.entries(vnode.props)) {
        element.setAttribute(key, value);
    }
    for (const child of vnode.children) {
        render(child, element);
    }
    container.appendChild(element);
}

这个 `render` 函数会递归地处理虚拟节点及其子节点。如果虚拟节点是字符串，就创建一个文本节点并添加到容器中；如果是对象，就创建对应的 DOM 元素，设置属性，然后递归处理子节点，最后将元素添加到容器中。可以使用以下方式测试这个虚拟 DOM 库：
javascript
const vnode = createElement('div', { id: 'app' }, 'Hello, Virtual DOM!');
const container = document.getElementById('root');
render(vnode, container);

这样就实现了一个简单的虚拟 DOM 库，能够创建虚拟节点并将其渲染到真实 DOM 中。