vue render函数和h()函数

​

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')

render: h => h(App) 解释

今天刚学vue，看到代码中 render: h => h(App) 看不懂了下面记录下

首先需要了解这是 es 6 的语法， 表示 Vue 实例选项对象的 render 方法作为一个函数， 接受传入的参数 h函数，返回 h(App) 的函数调用结果。

render: h => h(App) 是下面内容的缩写：

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

进一步缩写为(ES6 语法)：

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

再进一步缩写为：

   render(h){
   return h(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'
    })
  ]
)

createElement 函数是用来生成 HTML DOM 元素的，也就是上文中的 generate HTML structures，也就是 Hyperscript。h函数是hyperscript 的缩写，它的作用就是生成一个Vnode节点，可以认为它是createElement一种简单的缩写表示,这样作者才把 createElement 简写成 h。

参考链接：vue render函数和h()函数_vue render h_佑眼睛的博客-CSDN博客

参考链接：vue 初探之 h => h(App) 详解_逝水飞鱼的博客-CSDN博客

​