render函数具体参数解析（2024-09-11）

---

一、Render函数定义

在 Vue 2 中，render函数是一个用于创建 Vue 组件虚拟DOM的函数。它允许你以编程方式定义组件的结构，而不是使用模板语法。
render 函数接受一个 createElement 函数作为参数，并返回一个虚拟 DOM 节点。createElement 函数用于创建 Vue 的虚拟节点（ VNode）。

（在 Vue.js 中，h 函数通常是 createElement 的别名。）

// render 基本结构

render(createElement) {
  return createElement(
    'div',             // 标签名
    { class: 'is-parent' },  // 属性对象
    [
      createElement('h1', 'Hello World'),  // 子节点
      createElement('p', 'This is a child.') // 子节点
    ]
  );
}

---

二、函数三种用法

1、创建普通元素用法

创建了一个 div 元素，具有 class="my-class"，并包含文本 “Hello World”。

h('div', { class: 'my-class' }, 'Hello World')

2、创建组件用法

创建了一个 MyComponent 组件，并传递了 someProp 属性。

h(MyComponent, { props: { someProp: 'value' } })

<