Vue Render渲染函数 & JSX的使用

1、概述

Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。
让我们看一个比较简单的例子，这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题：

<h1>
  <a name="hello-world" href="#hello-world">
    Hello world!
  </a>
</h1>

对于这个列子，平时我们会这样来：

<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>
    </div>
</template>
<script>
export default {
    props: {
        level: {
            type: Number,
            required: true
        }
    }
}
</script>

以上的写法并不是最好的选择：不但代码冗长，而且在每一个级别的标题中重复书写了 <slot></slot>，在要插入锚点元素时还要再次重复。下面看下render 的写法。

2、Vue render 写法

<script>
export default {
    name: 'renderTest',
    render: function (createElement) {
        return createElement(
            'h' + this.level,   // 标签名称
            this.$slots.default // 子节点数组
        )
    },
    props: {
        level: {
            type: Number,
            required: true
        }
    }
}
</script>

是不是一下子简洁了好多？