Vue方向：Render渲染函数

1、了解Render函数

        Render函数是Vue2.x新增的一个函数、主要用来提升节点的性能，它是基于JavaScript计算的，使用Render函数将template里面的节点解析成虚拟的DOM。

        Vue推荐在绝大多数情况下使用模板来创建HTML，然而在一些场景中，真的需要JavaScript的运用即可使用渲染函数Render函数，比模板更接近编译器。

        简而言之: 在 Vue 中使用模板 HTML 语法组建页面，使用 Render 函数是为了使用 Js 语言来构建 DOM。

2、Render函数的核心原理

         Vue框架的核心是虚拟DOM，编译template模板时要转译成VNode的函数，当用render函数构建DOM时，Vue就免去了转译的步骤。

3、Render函数

         可以将一个函数传递给Vue 实例选项对象中render属性, 该函数会接受一个creatElement函数,可以使用它指定需要在页面上显示的内容,createElment 就是一个用来创建虚拟DOM(VNode)的函数

render函数是要有接收参数的

    1、第一个参数为必填项，类型可以是Function(createElement).

    2、render的返回值是VNode（虚拟节点），类型可以是 String、Array。

2、createElement的用法

createElement函数接收三个参数

     1.  第一个参数：是生成在页面上显示的标签元素（必需参数）。

     2.  第二个参数：是包含配置信息的数据对象（如HTML特性，属性，事件侦听器以及要绑定的class和style）。

     3.  第三个参数：是一个子节点字符串或者包含子节点的数组。

示例：

代码

1.  第一个参数 { String | Object | Function }

       第一个参数是一个必须的参数，这个参数可以是字符串string、对象object、或者一个函数function。

       未使用render函数创建H1标签的写法：

index.html

         使用render函数创建H1标签的写法：

          1、字符串：（第一个参数可以是标签名的字符串）

代码

               给createElement传入了一个字符串参数 h1 ，我们就会发现页面上 h1 标签被渲染出来了

               2. 对象：（参数除了是字符串以外，可以是组件的选项对象）

代码

                    结果我们会发现，页面直接显示的是组件内容。

                 3.  函数：（第一个参数也可以是函数，只不过这个函数执行完毕后，需要返回一个标签名的字符串或者组件对象）

代码

2、第二个参数：是一个可选的参数，这个参数是一个Object. 关于第一个参数创建的标签的属性

        是一个可选的参数，这个参数是一个对象Object，关于第一个参数的创建的标签的属性。

3、 第三个参数: {String | Array}

          这个参数是可选的，可以给其传一个String或Array处理子节点