Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这时你可以用 render 函数，它比 template 更接近编译器。

现在我有一个需求，就是写一个自定义标题的组件，但是有标题1到标题6，那么通常会这么写组件

  <div id="app">
    <heading>
      标题
    </heading>
  </div>
  <div id="notice">
    <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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      data () {
        return {
          msg: 'hello world'
        }
      },
      components: {
        'Heading': {
          template: '#notice',
          props: {
            level: {
              type: Number,
              default: 1
            }
          }
        }
      }
    })
  </script>

在这种场景中使用 template 并不是最好的选择：首先代码冗长，但是我们通过 render 函数来创建会更好

  <div id="app">
    <heading>
      标题
    </heading>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      data () {
        return {
          msg: 'hello world'
        }
      },
      components: {
        'Heading': {
          render(createElement) {
            return createElement(
              'h' + this.level,   // 标签名称
              this.$slots.default // 子元素数组
            )
          },  
          props: {
            level: {
              type: Number,
              default: 1
            }
          }
        }
      }
    })
  </script>

关于render函数的具体用法，请参考官网介绍：网址