手写vue的render

手写 Vue 的 render 函数需要了解以下几个概念：

1. VNode：表示虚拟节点，是 Vue 中一个重要的概念，它是一个 JavaScript 对象，用于描述 DOM 节点的属性和结构。

2. h 函数：用于创建 VNode 的函数，它接收三个参数，分别是标签名、属性对象和子节点数组。

3. createElement 函数：是 Vue 在编译模板时自动生成的函数，用于创建 VNode，它接收三个参数，分别是标签名、属性对象和子节点数组。

下面是一个简单的手写 Vue render 函数的例子：

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

在上面的例子中，我们使用 h 函数创建了一个 div 元素，它有一个 class 属性，子节点是一个 h1 元素和一个 p 元素。这两个元素都没有任何属性，只有文本内容。

如果使用 createElement 函数，可以像下面这样写：

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

在这个例子中，我们使用 createElement 函数创建了一个 div 元素，它有一个 class 属性，子节点是一个 h1 元素和一个 p 元素。这两个元素都没有任何属性，只有文本内容。

需要注意的是，在使用 createElement 函数时，子节点可以是一个数组，也可以是一个字符串。如果是字符串，它会被自动转换为一个文本节点。