VUE render函数应用和详解
前言
在平时编程时，大部分是通过template来创立html。然而在一些非凡的状况下，应用template形式时，就无奈很好的满足需要，在这个时候就须要 通过JavaScript 的编程能力来进行操作。此时，就到了render函数展现拳脚去时候了。
render的作用
官网示例入口
在官网的这里示例中，应用组件，将雷同的内容通过solt放进h1-h6的标签中，在应用传统形式时，代码不仅简短，而且在每一个级别的题目中反复书写了 <slot></slot>，在要插入锚点元素时还要再次反复。而应用render函数后，代码就精简了很多。
Vue.component('anchored-heading', { render: function (createElement) { return createElement( 'h' + this.level, // 标签名称 this.$slots.default // 子节点数组 ) }, props: { level: { type: Number, required: true } }})render函数的作用是，当场景中用 template 实现起来代码简短繁琐而且有大量反复，这个时候应用就能够极大的简化代码。
render函数解说
在应用render函数中，会应用到一个参数createElement，而这个createElement参数，实质上，也是一个函数，是vue中构建虚构dom所应用的工具。上面就围绕着这个createElement来看一下。
在createelement办法，有三个参数：
return createEement(, {}, [])- 第一个参数（必要参数）：次要是用于提供dom中的html内容，类型能够是字符串、对象或函数。
- 第二个参数（对象类型，可选）：用于设置这个dom中的一些款式、属性、传的组件的参数、绑定事件之类的。
- 第三个参数（类型是数组，数组元素类型是VNode,可选）：次要用于设置散发的内容，如新增的其余组件。
留神：组件树中的所有vnode必须是惟一的
通过传入createElement参数，创立虚构节点，而后再将节点返回给render返回进来。
总的来说，render函数的实质就是创立一个虚构节点。
render和template的区别
相同之处：
render 函数 跟 template 一样都是创立 html 模板
不同之处：
- Template适宜逻辑简略，render适宜简单逻辑。
- 使用者template了解起来绝对容易，但灵活性有余；自定义render函数灵活性高，但对使用者要求较高。
- render的性能较高，template性能较低。
- 应用render函数渲染没有编译过程，相当于使用者间接将代码给程序。所以，应用它对使用者要求高，且易呈现谬误
- Render 函数的优先级要比template的级别要高，然而要留神的是Mustache(双花括号)语法就不能再次应用
留神：template和render不能一起应用，否则有效
render举例
如一次封装一套通用按钮组件，按钮有四个款式(success、error、warning、default)。
template形式是如下：
<div class="btn btn-success" v-if="type === 'success'">{{ text }}</div> <div class="btn btn-danger" v-else-if="type === 'danger'">{{ text }}</div> <div class="btn btn-warning" v-else-if="type === 'warning'">{{ text }}</div>这样写在按钮少的时候没有问题，然而一旦按钮数量变多，这样写就会显得特地简短，在这个时候，就须要render函数。
依据状况生成按钮DOM
在应用render函数前，须要先把template标签去掉，只保留逻辑层。
通过传入的type动静填入class，通过inderText将内容增加入DOM中。
render(h) { return h('div', { class: { btn: true, 'btn-success': this.type === 'success', 'btn-danger': this.type === 'danger', 'btn-warning': this.type === 'warning' }, domProps: { innerText: this.text }, on: { click: this.handleClick } }); },