> For the complete documentation index, see [llms.txt](https://ibbicode.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ibbicode.gitbook.io/notes/vue/vue-she-ji-yu-shi-xian/di-yi-zhang/yun-hang-shi-he-bian-yi-shi.md).

# 运行时和编译时

```js
const obj = {
  tag: "div",
  children: [{ tag: "span", children: "hello world" }],
};

function Render(obj, root) {
  const el = document.createElement(obj.tag);
  if (typeof obj.children === "string") {
    const text = document.createTextNode(obj.children);
    el.appendChild(text);
  } else {
    obj.children.forEach((child) => {
      Render(child, el);
    });
  }

  root.appendChild(el);
}
// 渲染到body下
Render(obj, document.body);

const html = ` <div>
  <span>hello world</span>
</div>`;
// Compiler相当于将html转换成上面的obj
const obj2 = Compiler(html);
Render(obj2, document.body);

```