VUE（1）render: h =＞ h(App) 小结

目的：生成一个基于参数 “APP”内容 的 HTML。

根据以下链接，整理。 

v-for模板

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

模板类似于html代码，又不是。因为模板中含有v-if，v-for，@click等不属于html的属性代码。

首选模板含有v-for等逻辑，因此必须使用js来进行解析。（html和css解析不了）js会解析为一个js函数，即render函数，最后经过其他函数，渲染成html。

Vue render函数 

render函数可以作为一道分割线，render函数的左边可以称之为编译期，将Vue的模板转换为渲染函数。

render函数的右边是Vue的运行时，主要是基于渲染函数生成Virtual DOM树，Diff和Patch。

渲染函数的基础

render 函数 跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，需要使用JavaScript的编程能力和创建HTML，这时候就可以用 render 函数，它比template更接近编译器。

createElement 是 render 函数 的参数，它本身也是个函数，并且有三个参数。

 /**
  * render: 渲染函数
  * 参数: createElement
  * 参数类型: Function
 */
 render: function (createElement) {
   let _this = this['$options'].parent	// 我这个是在 .vue 文件的 components 中写的，这样写才能访问this
   let _header = _this.$slots.header   	// $slots: vue中所有分发插槽，不具名的都在default里
 
   /**
    * createElement 本身也是一个函数，它有三个参数
    * 返回值: VNode，即虚拟节点
    * 1. 一个 HTML 标签字符串，组件选项对象，或者解析上述任何一种的一个 async 异步函数。必需参数。{String | Object | Function} - 就是你要渲染的最外层标签
    * 2. 一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。可选参数。{Object} - 1中的标签的属性
    * 3. 子虚拟节点 (VNodes)，由 `createElement()` 构建而成，也可以使用字符串来生成“文本虚拟节点”。可选参数。{String | Array} - 1的子节点，可以用 createElement() 创建，文本节点直接写就可以
    */
   return createElement(       
     // 1. 要渲染的标签名称：第一个参数【必需】      
     'div',   
     // 2. 1中渲染的标签的属性，详情查看文档：第二个参数【可选】
     {
       style: {
         color: '#333',
         border: '1px solid #ccc'
       }
     },
     // 3. 1中渲染的标签的子元素数组：第三个参数【可选】
     [
       'text',   // 文本节点直接写就可以
       _this.$slots.default,  // 所有不具名插槽，是个数组
       createElement('div', _header)   // createElement()创建的VNodes
     ]
   )
 }

ES6箭头语法：=>

// ES5  
render: function (createElement) {
    return createElement(App);
}
//缩写
render (createElement) {
    return createElement(App);
}
//再缩写
render (h){
    return h(App);
}
// ES6  
h => h(App); 

“ h ” 来自单词 hyperscript，这个单词通常用在 virtual-dom 的实现中。Hyperscript 本身是指生成HTML 结构的 script 脚本，因为 HTML 是 hyper-text markup language 的缩写（超文本标记语言）。

即createElement 函数是用来生成 HTML DOM 元素的，也就是“ h ”

来源：

vue 模板如何解析 ，vue框架整体流程    作者： 孟繁贵

Vue render函数 - 简书  作者：kangaroo_v

终于搞懂了vue 的 render 函数（一） -_-|||_Amy的博客-CSDN博客_render函数  作者： __Amy

https://segmentfault.com/q/1010000007130348