Vue 中的render(h)

在vue架构中main.js往往为程序的入口文件，其中render()函数将h(app)中传入的内容渲染成虚拟节点(Vnode)，是补充通过模板template创建HTML的一种方法，事实上，template中内容也会被编译成Vnode，因此render函数比模板更接近编辑器。
下面展示一些 main.js常见内容。

new Vue({
  router,
  store,
  // render函数的作用就是将App那个vue组件渲染成DOM节点。
  // render函数里面的形参，可以做到这一点，所以 h这个函数 ， 里面传进去一个App组件。
  render: h => h(App)
}).$mount('#app')

h函数是hyperscript 的缩写，它的作用就是生成一个Vnode节点，可以认为它是createElement一种简单的缩写表示。

render: function (createElement) { return createElement(App);
}

其中h()接受三个参数，返回vNode节点

// @returns {VNode}
h(
  // {String | Object | Function} tag
  // 一个 HTML 标签名、一个组件、一个异步组件、或
  // 一个函数式组件。
  //
  // 必需的。
  'div',

  // {Object} props
  // 与 attribute、prop 和事件相对应的对象。
  // 我们会在模板中使用。
  //
  // 可选的。
  {},

  // {String | Array | Object} children
  // 子 VNodes, 使用 `h()` 构建,
  // 或使用字符串获取 "文本 Vnode" 或者
  // 有插槽的对象。
  //
  // 可选的。
  [
    'Some text comes first.',
    h('h1', 'A headline'),
    h(MyComponent, {
      someProp: 'foobar'
    })
  ]
)