iview（vue） render函数

Z时代
2024-01-10
分类：综合

vue

之前并没有细看过vue render函数,现在开发用到iview的时候，遇到render函数渲染的问题了，就顺便看了一下它，然后做个笔记。

1.什么是render函数，

我们的html模板，一部分是我们经常用到的template创建，另一部分是用render函数渲染出来的。所以render函数的作用就是用来渲染一些复杂，或者自定义模板的。

你可以理解为，它本质就是一个函数而已，功能就是用来渲染模板。

2.render的用法

render函数它需要传一个参数，这个参数也是一个函数，那就是目前大家都称为createElement的函数。顾名思义，createElement函数就是用来创建元素的函数。

render函数的返回值是VNode（虚拟节点），就是我们需要渲染出来的节点。

而createElement函数有三个参数：
（1）第一个参数 : 一个 HTML 标签字符串，组件选项对象，或者解析上述任何一种的一个 async 异步函数。类型：{String | Object | Function}。必需。

如图

（2）第二个参数：一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。类型：{Object}。可选。
常用的属性有class:|style:|attrs:|domProps:|on:, 其中class是给组件的模板加class, style是给它设置样式,attrs是设置除了class和style之外的属性,domProps是用来写原生的DOM属性,on用来如click:function(){}或者input: function(){}之类。

（3）第三个参数：子虚拟节点 (VNodes)，由 createElement() 构建而成，也可以使用字符串来生成“文本虚拟节点”。类型：{String | Array}。可选。