vue的render函数,vue的render的作用和参数
本文主要为大家介绍VUErender功能，有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
前言render的作用render函数解释了render和template的区别。render给出了一个总结的例子
前言
在普通编程中，html大多是通过模板创建的。但在一些特殊情况下，使用模板法时，并不能很好地满足要求。这时候就需要通过JavaScript的编程能力来操作了。至此，是时候让render函数大显身手了。
render的作用
官网示例入口
在官网这里的例子中，通过solt用组件把相同的内容放到h1-h6的标签中。传统的方式，代码不仅冗长，而且每一关的标题里都要重复写槽/slot，要插入锚元素的时候还得再重复一遍。使用render函数后，代码简化了很多。
Vue.component(锚定标题，{
render:function(createElement){
返回createElement(
H this.level，//标签名称
这个。$slots.default //子节点数组
)
},
道具：{
级别：{
类型：数量，
必填：真
}
}
})
render函数的作用在于场景中模板实现的代码繁琐重复，此时使用可以大大简化代码。
render函数讲解
在使用render函数时，会用到一个参数createElement，这个createElement参数，本质上也是一个函数，是用来在vue中构建虚拟dom的工具。让我们看看这个createElement。
在createelement方法中，有三个参数：
返回createEement(，{}，[])
1.第一个参数(必选参数):主要用于在dom中提供html内容。类型可以是字符串、对象或函数。
2.第二个参数(object type，可选):用于在这个dom中设置一些样式、属性、传输组件的参数、绑定事件等。
3.第三个参数(类型为array，数组元素类型为VNode，可选):主要用于设置分发的内容，比如其他新添加的组件。
注意：组件树中的所有vnode必须是唯一的
通过传入createElement参数，创建一个虚拟节点，然后返回要呈现的节点。
一般来说，render函数的本质是创建一个虚拟节点。
render和template的区别
相同之处：
render函数和template一样，创建一个html模板。
不同之处：
模板适合简单逻辑，渲染适合复杂逻辑。
用户模板相对容易理解，但不够灵活；自定义渲染功能灵活性高，但对用户要求高。
Render性能高，template性能低。
用render函数渲染，没有编译过程，相当于用户直接把代码交给程序。因此，使用它需要大量的用户，并且容易出错。
Render函数的优先级高于模板，但是需要注意的是Mustache(双花括号)语法不能重复使用。
注意：模板和渲染不能一起使用，否则无效。
render举例
如果一次打包一组通用按钮组件，这些按钮有四种样式(成功、错误、警告、默认)。
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函数之前，需要移除模板标签，只保留逻辑层。
类由传入类型动态填充，内容由inderText添加到DOM中。
渲染(h) {
return h(div ，{
类别：{
btn:没错，
BTN-success :this . type=== success
BTN-danger :this . type=== danger ，
BTN-warning :this . type=== warning
},
domProps: {
内部文本：this.text
},
开：{
点击：this.handleClick点击
}
});
},
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。