VUE|VUE render函数使用和详解
VUE render函数使用和详解
前言
在平时编程时,大部分是通过template来创建html。但是在一些特殊的情况下,使用template方式时,就无法很好的满足需求,在这个时候就需要 通过JavaScript 的编程能力来进行操作。此时,就到了render函数展示拳脚去时候了。
render的作用
官网示例入口
在官网的这里示例中,使用组件,将相同的内容通过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来看一下。
在createelement方法,有三个参数:
return createEement(, {}, [])
- 第一个参数(必要参数):主要是用于提供dom中的html内容,类型可以是字符串、对象或函数。
- 第二个参数(对象类型,可选):用于设置这个dom中的一些样式、属性、传的组件的参数、绑定事件之类的。
- 第三个参数(类型是数组,数组元素类型是VNode,可选):主要用于设置分发的内容,如新增的其他组件。
通过传入createElement参数,创建虚拟节点,然后再将节点返回给render返回出去。
总的来说,render函数的本质就是创建一个虚拟节点。
render和template的区别 相同之处:
render 函数
跟 template
一样都是创建 html 模板不同之处:
- Template适合逻辑简单,render适合复杂逻辑。
- 使用者template理解起来相对容易,但灵活性不足;自定义render函数灵活性高,但对使用者要求较高。
- render的性能较高,template性能较低。
- 使用render函数渲染没有编译过程,相当于使用者直接将代码给程序。所以,使用它对使用者要求高,且易出现错误
- Render 函数的优先级要比template的级别要高,但是要注意的是Mustache(双花括号)语法就不能再次使用
render举例 如一次封装一套通用按钮组件,按钮有四个样式(success、error、warning、default)。
template方式是如下:
{{ text }}
{{ text }}
{{ text }}
这样写在按钮少的时候没有问题,但是一旦按钮数量变多,这样写就会显得特别冗长,在这个时候,就需要render函数。
根据情况生成按钮DOM
【VUE|VUE 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
}
});
},
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 一起来学习C语言的字符串转换函数
- C语言字符函数中的isalnum()和iscntrl()你都知道吗
- C语言浮点函数中的modf和fmod详解
- C语言中的时间函数clock()和time()你都了解吗
- 概率论/统计学|随机变量 的 分布函数 与 概率密度函数 的区别
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数()
- 用npm发布一个包的教程并编写一个vue的插件发布