目录
- 前言
- render的作用
- render函数讲解
- render和template的区别
- 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(, {}, [])
1.第一个参数（必要参数）：主要是用于提供dom中的html内容，类型可以是字符串、对象或函数。
2.第二个参数（对象类型，可选）：用于设置这个dom中的一些样式、属性、传的组件的参数、绑定事件之类的。
3.第三个参数（类型是数组，数组元素类型是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
}
});
},
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!
【本文转自：香港高防服务器 http://www.558idc.com/hkgf.html 复制请保留原URL】