Vue render渲染函数

基础

Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML，比如在某个index.vue组件里，用模版template创建html代码如下:

<h1><a name="hello-world" href="#hello-world">Hello world!</a>
</h1>

然而在一些场景中，你真的需要 JavaScript 的完全编程的能力,不需要html，这就可以考虑用 render 渲染函数，它比 template 更接近编译器。我们一起来学习一下。

render渲染函数的作用

来看一下官网的例子: vue官网
官网的这里示例中，使用组件，将相同的内容通过solt放进h1-h6的标签中，在使用传统方式时，代码不仅冗长，而且在每一个级别的标题中重复书写了，在要插入锚点元素时还要再次重复。而使用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参数，创建虚拟节点，然后再将节点返回给render返回出去。总的来说，render函数的本质就是创建一个虚拟dom节点。在createelement方法，有三个参数：

return createEement(, {}, [])

1.第一个参数（必要参数）：主要是用于提供dom中的html内容，类型可以是字符串、对象或函数。
2.第二个参数（对象类型，可选）：用于设置这个dom中的一些样式、属性、传的组件的参数、绑定事件之类的。
3.第三个参数（类型是数组，数组元素类型是VNode,可选）：主要用于设置分发的内容，如新增的其他组件。

// @returns {VNode}
createElement(// {String | Object | Function}// 一个 HTML 标签名、组件选项对象，或者// resolve 了上述任何一种的一个 async 函数。必填项。'div',// {Object}// 一个与模板中 attribute 对应的数据对象。可选。{// (详情见下一节)},// {String | Array}// 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，// 也可以使用字符串来生成“文本虚拟节点”。可选。['先写一些文字',createElement('h1', '一则头条'),createElement(MyComponent, {props: {someProp: 'foobar'}})]
)

再比如说，我们需要通过render渲染一些elementUI的icon，那我们可以像下面这样写某个index.vue,这样就可以创建虚拟dom，比如创建一些icon <i class="el-icon-edit"> <i class="el-icon-share">:

<script>
export default {name: "MenuItem",functional: true,props: {icon: {type: String,default: "",},title: {type: String,default: "",},},render(createElement, context) {const { icon, title } = context.props;const vnodes = [];if (icon) {vnodes.push(// <svg-icon icon-class={icon} class="navIcon" />// `<i class="${icon}"></i>`createElement("i", {class: icon,}));}if (title) {vnodes.push(<span slot="title" class="navSpan">{title}</span>);}return vnodes;},
};
</script>
<style scoped>
svg {font-size: 16px;
}
</style>

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函数。在使用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}});},