手写vue的vNode转化dom方法

在 Vue 中，可以通过 `render` 函数或者模板来生成虚拟 DOM，而将虚拟 DOM 转化为真实 DOM 的过程，就是 Vue 中的“渲染”。在 Vue 中，提供了一个 `createElment` 函数，可以将虚拟 DOM 转换成真实 DOM。

下面是一个手写 Vue 的 vNode 转化 dom 的例子：

function render() {
  return h('div', { class: 'container' }, [
    h('h1', null, 'Hello, World!'),
    h('p', null, 'This is a paragraph.')
  ])
}

const container = document.getElementById('app')
const vnode = render()
const dom = createDOM(vnode)

function createDOM(vnode) {
  if (typeof vnode === 'string') {
    return document.createTextNode(vnode)
  }

  const el = document.createElement(vnode.tag)
  
  if (vnode.data && vnode.data.attrs) {
    Object.keys(vnode.data.attrs).forEach(key => {
      el.setAttribute(key, vnode.data.attrs[key])
    })
  }
  
  vnode.children.forEach(child => {
    el.appendChild(createDOM(child))
  })

  return el
}

container.appendChild(dom)

在上面的例子中，我们先通过 `render` 函数生成一个虚拟 DOM，然后通过 `createDOM` 函数将虚拟 DOM 转换成真实 DOM，最后将真实 DOM 添加到页面中。

在 `createDOM` 函数中，首先判断当前节点是否是一个文本节点，如果是，则通过 `document.createTextNode` 方法创建一个文本节点并返回；否则，通过 `document.createElement` 方法创建一个元素节点，并将节点的属性和子节点递归创建。

需要注意的是，`vnode` 的属性和子节点都保存在 `data` 对象中，属性保存在 `data.attrs` 中，子节点保存在 `children` 中。在创建元素节点时，需要遍历属性和子节点，并分别设置到元素节点中。