使用render函数渲染组件

一、说明

render渲染 render渲染例句

Vue实例中除了 components 属性注册组件，还可以使用 render 属性。

指向一个函数，第一个固定形参 createElements ，是一个方法，调用它可以把指定组件模板渲染为html结构。

此 render 属性return返回的结果，会替换页面上此Vue实例 el 指定的那容器（所有都清空然后替换）。

二、实例

ElementUI中table使用render/jsx渲染

在使用elemenUI的table的时候,为了项目的样式统一我对tabel进行了简单的封装, 主要通过传入data以及columns来渲染table.

通过if判断el-table-column的类型,但是有时候碰见复杂的需求,这种方式是不现实的,因为我们不可能去判断所有的类型. 这个时候用render/jsx去插入slot的方式渲染就再合适不过了.

比如这种需求, 渲染一个label + 一个icon + 一个弹出框, 弹出框内容是根据当前行的数据渲染出来对的.

我们在初始化columns的时候声明类型,以及render函数, 返回VNode节点.

Vue - 渲染函数render

简单的说，在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

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

示例： 分别使用html语法和render函数来实现根据传入的 level （h1-h6）页面渲染不同的标题格式

【1】使用组件的形式

【2】使用render函数的形式（修改child1子组件）

render 函数即渲染函数，它是个函数，render 函数的返回值是VNode（即：虚拟节点，也就是我们要渲染的节点）

createElement 是 render 函数的参数，它本身也是个函数，并且有三个参数。接来下我们重点介绍这三个参数

【1】createElement 第一个参数是必填的，可以是String | Object | Function

示例：

【2】createElement 第二个参数是选填的，一个与模板中属性对应的数据对象 ****常用的有class | style | attrs | domProps | on

【3】createElement 第三个参数是选填的，代表子级虚拟节点 (VNodes)，由 createElement() 构建而成，正常来讲接收的是一个字符串或者一个数组，一般数组用的是比较多的

在render函数中，没有提供v-model的实现，所以你必须自己实现相应的逻辑。这就是深入底层的代价，但与v-model相比，这可以让你更好地控制交互细节。

结果如下：

对于.passive，.capture， .once 这些事件修饰符, Vue 提供了相应的前缀可以用于 on

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

复杂的render函数书写异常痛苦，这就是为什么会有一个Babel插件，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。

JSX语法学习文档: vuejs/JSX JSX语法简介

Vue中render渲染函数详解

原理：Vue框架的核心是虚拟DOM，编译template模板时要转译成VNode的函数，当用render函数构建DOM时，Vue就免去了转译的步骤。

当使用render函数描述虚拟DOM时，Vue提供一个函数： createElement ，这个函数是就构建虚拟DOM所需要的工具。它可以被简写为 h 。

render函数的返回值是VNode（虚拟节点），本质上的是 createElement 函数生成的VNode。