Vue中的 h 函数

在了解 h 函数之前，我们需要先了解 虚拟DOM，

什么是 虚拟DOM？

虚拟DOM 是使用JS 对象模拟真实的DOM结构，用JavaScript 对象描述DOM 的层次结构。DOM中的一切属性都在虚拟DOM 中有对应的属性。
Vue当中虚拟DOM 的实现参考的是 snabbdom 库

虚拟DOM 就是一个简单的JavaScript 对象，包含 tag、props、children 三个属性

在初始化Vue项目时，经常会在 main.js 文件中 看到这一段代码：

new Vue({
......
render : h => h(App)
})

其实 其中的 render 方法也可以这样写

new Vue({
......
  render:function(createElement){
    return createElement(App)
  }
})

h 函数就是 Vue中的createElement方法，函数作用为 创建虚拟DOM，追踪 DOM 变化。

createElement参数（也就是 h函数）

createElement 函数接受三个参数，分别是：

• tag(标签名)、组件的选项对象、函数 （必选）
• 一个对象，标签的属性对应的数据 （可选）
• 子级虚拟节点，字符串形式或数组形式，子级虚拟节点也需要使用createElement构建。

例子 ：
// 真实DOM 
    <div id="app">
        {{name}}
        <p>{{age}}</p>
    </div>

// 在 render 函数中渲染
    render: function(createElement){
        return createElement("div",{id:"app",[this.name,createElement("p",this.age)]})
    }
//  注意 ： 如果父元素有文本内容，在render函数中写的时候，内容写在参数三——数组的第一个参数中。