一、前言

首先，我猜你在点开我这篇文章之前99%是在官网先看了一遍文档的，下面谈谈我个人的理解, render 函数跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数，下面就把我实践的心得分享一下，本文建议配合官方文档阅读。

二、实践

我们就拿官网那个例子说，这个组件可以根据父级组件给他传递的level来渲染h1还是h6，代码如下：

<template>  
<div>
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</div>
</template>

<script>
export defalut {
  // 接收父组件传来的 level
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}
</script>

这种场景确实不多，但是也会遇到，比如现在有6种不同的状态，用1，2,3,4,5,6表示。我们要通过这些状态展示不同的图片，如果后台不给你返回图片地址只返回状态对应的数字（图片放在本地），用render函数在合适不过了（前提是状态有很多，2、3个就算了）。下面是render函数重写上面的组件：

export default {
  render: function (createElement) {    // createElement可以写成h，这是公认写法
    // createElement 是 render 函数 的参数，它本身也是个函数，并且有三个参数。
    
    /*
    这里说明它的三个参数：
    1、一个 HTML 标签字符串，组件选项对象，或者解析上述任何一种的一个 async 异步函数。类型：{String | Object | Function}。必需。
    2、一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。类型：{Object}。可选。
    3、子虚拟节点 (VNodes)，由 createElement() 构建而成，也可以使用字符串来生成“文本虚拟节点”。类型：{String | Array}。可选。
    */
    return createElement(
       // 参数1、标签名称，父组件传几，我这就是h几，不用再template上面加if，else了是不是很简洁实用？（必填）
      'h' + this.level, 
       // 参数2、这里相当于给标签加属性 例如：<div class='foo' style='color:red,font-size: 14px'></div>（可选）
      {
          // 与 `v-bind:class` 的 API 相同，
          // 接受一个字符串、对象或字符串和对象组成的数组
          'class': {
            foo: true,
            bar: false
          },
          // 与 `v-bind:style` 的 API 相同，
          // 接受一个字符串、对象，或对象组成的数组
          style: {
            color: 'red',
            fontSize: '14px'
          },
      },
      // 参数3、参数中渲染的标签的子元素数组（可选）
      [
           'text',   // 文本节点直接写就可以
           _this.$slots.default,  // 所有不具名插槽，是个数组
           createElement('div', _header)   // createElement()创建的VNodes
      ]
    )
  },
  // 接收父组件传来的 level
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

当然createElement的第一个参数也可以是组件，vue的强大真的不是盖的，vue的真实dom是tamplate转成createElement的形式来进行渲染的。如果你用render函数，就可以免去编译这一步骤，当然render函数的语法还是有缺点，需要加入jsx来弥补，这就有点像react了。话不多说，render方面就介绍这么多，感谢观看！