。

然而在一些条件判断比较复杂的场景下#xff0c;使用JavaScript去描绘HTML的生成逻辑会显得更加的简洁直观。

1.render函数

在编写vue单文件的大多数情况下我们都是使用template模板来创建HTML。

然而在一些条件判断比较复杂的场景下使用JavaScript去描绘HTML的生成逻辑会显得更加的简洁直观。

如果自己在开发的时候编写的每个标题包括h1~h6都需要带锚点如下所示

h1a

{name:anchor-header,props:{level:Number,name:String,content:String},components:{anchor:{props:{content:String,name:String},template:a

:idname

{name:anchor-header,props:{level:Number,name:String,content:String},render:function(createElement){const

anchor{props:{content:String,name:String},template:a

:idname

anchorElcreateElement(anchor,{props:{content:this.content,name:this.name}})const

elcreateElement(h${this.level},[anchorEl])return

el}

每一个render函数都要return一个VNode类型的变量是Vue中自定义的虚拟节点(virtual

Vue

但自己实践在vue单文件实践后发现如果同时存在template和render生成的html会以template的逻辑为主奇怪。

上述例子的代码可以知道render函数使用的场景是要根据不同条件切换不同HTML标签可以使用render函数。

或者条件判断较多的template中用渲染函数编写会让代码的可读性更高的情况下也推荐使用render函数。

2.createElement

createElement用于创建且return一个VNode类型的变量虚拟节点以下是该函数的传入参数

1一个

标签名、组件选项对象或者resolve前面两种之一类型的async函数。

必填。

例如传入div表示想创建一个html标签为div的VNode如果传入transition代表创建transition组件。

上面作为粒子的代码就是根据传入的类型为Number的参数level用模板字符串拼接成标签名称。

传入level为1则拼接出来的HTML标签名称为h1。

代表要创建html标签为h1的VNode。

{class,style,attrs,props,domProps,on,nativeOn,directives:[{name,value,expression,arg,modifiers}],scopedSlots:{default:propscreateElement()},slot,key,ref,refInFor

}大部分属性和vue组件中存在的属性的作用一样我就只挑几个比较特殊的属性来说明

**nativeOn**用于监听原生事件而不是组件内使用。

例如

nativeOn:

this.nativeClickHandler}相当于click.nativenativeClickHandler

格式为{

789)的注释则slotfoo插槽中显示内容依然为span789/span。

refInFor**如果你在渲染函数中给多个元素都应用了相同的

ref

(VNodes)。

如果传入的是VNode则要用列Array传入另外也可以使用字符串来生成“文本虚拟节点”。

可选。

3.函数式组件

函数式组件相比于一般的vue组件而言最大的区别是非响应式的。

它不会监听任何数据也没有实例因此没有状态意味着不存在诸如createdmounted的生命周期。

好处是因只是函数故渲染开销也低很多。

script

{name:anchor-header,functional:true,

以functional:true声明该组件为函数式组件props:{level:Number,name:String,content:String},//

对于函数式组件render函数会额外传入一个context参数用来表示上下文即替代this。

函数式组件没有实例故不存在thisrender:function(createElement,context){

const

anchor{props:{content:String,name:String},template:a

:idname

anchorElcreateElement(anchor,{props:{content:context.props.content,

//通过context.props调用props传入的变量name:context.props.name}})const

elcreateElement(h${context.props.level},[anchorEl])return

el}

最后以el-row组件的源码来分析该源码的渲染逻辑在render函数上非常简洁明了

export

1.传入第一个参数为this.tag用于根据参数生成对应的html标签。

2.第二个参数中传入class和style是根据props中的type,gutter,justify,align生成的。

3.第三个参数传入子节点。

此处通过this.$slots.default拿到传入的子节点。

例如

el-rowdiv123/div

获取的数据则是一个包含上面div123/div的VNode的数组。

拓展slots()

类似的吗在一些场景中是这样——但如果是如下的带有子节点的函数式组件呢

/my-functional-component对于这个组件children

会给你两个段落标签而

slots()因此你可以选择让组件感知某个插槽机制还是简单地通过传递