Vue中render函数具体作用是什么？

本文共计1473个文字，预计阅读时间需要6分钟。

render函数在Vue中的应用：初探Vue渲染函数，一步步深入了解。建议配合文档阅读，本文也是基于官方文档的理解加个人理解。注意：本文代码均在一个文件组件中编写。

render 函数作用

vue渲染函数文档第一遍看的晕晕乎乎的，再看看写写终于清晰了。建议配合文档阅读，本文也是根据文档加上自己的理解。

注：本文代码都是在单文件组件中编写。代码地址

render 函数作用

render 函数 跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数。

官网例子：子组件想要根据父组件传递的 level 值（1-6）来决定渲染标签 h 几。具体代码可以看文档。

render 函数讲解

render 函数即渲染函数，它是个函数，它的参数也是个函数——即 createElement，我们重点来说 createElement 参数。

render 函数的返回值（VNode）

VNode（即：虚拟节点），也就是我们要渲染的节点。

render 函数的参数（createElement）

createElement 是 render 函数 的参数，它本身也是个函数，并且有三个参数。