浅析Vue 中的 render 函数

2023-07-31 12:07:04 87

render函数是什么

简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM

因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,

vm中有一个方法_c,也是这个函数的别名

先看官网对createElement的介绍

//@returns{VNode}
createElement(
//{String|Object|Function}
//一个HTML标签字符串，组件选项对象，或者
//解析上述任何一种的一个async异步函数，必要参数。
'div',

//{Object}
//一个包含模板相关属性的数据对象
//这样，您可以在template中使用这些属性。可选参数。
{
//(详情见下一节)
},

//{String|Array}
//子节点(VNodes)，由`createElement()`构建而成，
//或使用字符串来生成“文本节点”。可选参数。
[
'先写一些文字',
createElement('h1','一则头条'),
createElement(MyComponent,{
props:{
someProp:'foobar'
}
})
]
)

就是说createElement（params1，params2，params3）接受三个参数，每个参数的类型官方介绍已经说明

好了，开始今天的正文。

本文GitHubhttps://github.com/qq44924588...上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。

我们知道Vue模板是非常强大的，基本可以完成我们日常开发的所有任务。但是，有一些用例，如基于输入或插槽值创建动态组件方式，render函数会比模板完成的更好也更出色。

用过React开发的人对render函数应该非常熟悉，因为React组件通过JSX和render函数来构建的。尽管Vuerender函数也可以用JSX编写，但在这里我们使用原生JS方式，因为这样，我们可以更轻松地了解Vue组件系统的一些基础。

值得注意的是，Vue的模板实际上在编译时也是会先解析成render函数表示方式。模板只是在render函数之上提供了一个方便且熟悉的语法糖。尽管render函数更强大，但render函数可读性很差，相对用的也比较少了。

创建组件

带有render函数的组件没有template标记或属性。相反，该组件定义了一个了名为render的函数，该函数接收一个reateElement(renderElement:String|Component,definition:Object,children:String|Array)参数（由于某种原因，通常别名为h，归咎于JSX）并返回使用该函数创建的元素，其他一切保持不变，来看看事例：

exportdefault{
data(){
return{
isRed:true
}
},

/*
*
*/
//render中的渲染结果与上面等价
render(h){
returnh('div',{
'class':{
'is-red':this.isRed
}
},[
h('p','这是一个render事例')
])
}
}

render函数中如何表示指令

Vue模板具有各种便捷功能，以便向模板添加基本逻辑和绑定功能，如v-if、v-for、v-moel指令等。在render函数中是无法使用这些指令的。取而代之的是以纯JS来实现，对于大多数指令而言，这也是比较简单的。

v-if

v-if用纯JS实现很简单，只需围绕createElement调用使用if(expr)语句即可。

v-for

v-for可以使用for-of，Array.map，Array.filter等的JS方法中的任何一种来实现。我们可以通过非常有趣的方式将它们组合在一起，以实现过滤或状态切片，而无需计算属性。

例如，有以下Vue的模板代码

可以用下面的render函数来实现上面的效果：

render(h){
returnh('ul',this.pod.map(pea=>h('li',pea.name)));
}

v-model

我们知道，v-model只是bind属性与value的语法糖，并在触发input事件时设置数据属性。但是，在render函数没有这样的简写，我们需要自己实现。

假设，在Vue中，我们有如下的结构：

上面代码等价于：

在render函数中可以用下面方式来实现上面的代码：

render(h){
returnh('input',{
domProps:{
value:this.myBoundProperty
},
on:{
input:e=>{
this.myBoundProperty=e.target.value
}
}
})
}

v-bind

attribute和property这两种类型的绑定被放在元素定义中，如arttrs、props和domProps(value和innerHTML之类的东西)。

render(h){
returnh('div',{
attrs:{
//
id:this.myCustomId
},

props:{
//
someProp:this.someonePutSomethingHere
},

domProps:{
//
value:this.somethingElse
}
});
}

需要注意的是，对于class和style的绑定是直接在定义的根进行处理，而不是作为attrs，props或domProps处理。

render(h){
returnh('div',{
//“类”是JS中的保留关键字，因此必须引用它。
'class':{
myClass:true,
theirClass:false
},

style:{
backgroundColor:'green'
}
});
}

v-on

对事件处理程也是直接添加到元素定义中on定义

render(h){
returnh('div',{
on:{
click(e){
console.log('Igotclickeded!')
}
}
});
}

事件的修饰符可以在处理程序内部实现：

.stop->e.stopPropagation()
.prevent->e.preventDefault()
.self->if(e.target!==e.currentTarget)return

键盘修饰符

.[TARGET_KEY_CODE]->if(event.keyCode!==TARGET_KEY_CODE)return
.[MODIFIER]->if(!event.MODIFIERKey)return

特殊属性

Slots可以通过this.$slots作为createElement（）节点的数组来访问插槽。

作用域插槽存储在this.$scopedSlots[scope](props：object)中，作为返回createElement()节点数组的函数。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log调试，这边顺便给大家推荐一个好用的BUG监控工具Fundebug。

总结

到此这篇关于浅析Vue中的render函数的文章就介绍到这了,更多相关Vuerender函数内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

浅析Vue 中的 render 函数

热门推荐

随机推荐