基础

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

让我们深入一个简单的例子，这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题：

  1. <h1>
  2.   <a name="hello-world" href="#hello-world">
  3.     Hello world!
  4.   </a>
  5. </h1>

对于上面的 HTML，你决定这样定义组件接口：

  1. <anchored-heading :level="1">Hello world!</anchored-heading>

当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时，你可能很快想到这样实现：

  1. <script type="text/x-template" id="anchored-heading-template">
  2.   <h1 v-if="level === 1">
  3.     <slot></slot>
  4.   </h1>
  5.   <h2 v-else-if="level === 2">
  6.     <slot></slot>
  7.   </h2>
  8.   <h3 v-else-if="level === 3">
  9.     <slot></slot>
  10.   </h3>
  11.   <h4 v-else-if="level === 4">
  12.     <slot></slot>
  13.   </h4>
  14.   <h5 v-else-if="level === 5">
  15.     <slot></slot>
  16.   </h5>
  17.   <h6 v-else-if="level === 6">
  18.     <slot></slot>
  19.   </h6>
  20. </script>
  1. Vue.component('anchored-heading', {
  2.   template: '#anchored-heading-template',
  3.   props: {
  4.     level: {
  5.       type: Number,
  6.       required: true
  7.     }
  8.   }
  9. })

这里用模板并不是最好的选择：不但代码冗长，而且在每一个级别的标题中重复书写了 <slot></slot>，在要插入锚点元素时还要再次重复。

虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。那么，我们来尝试使用 render 函数重写上面的例子：

  1. Vue.component('anchored-heading', {
  2.   render: function (createElement) {
  3.     return createElement(
  4.       'h' + this.level,   // 标签名称
  5.       this.$slots.default // 子节点数组
  6.     )
  7.   },
  8.   props: {
  9.     level: {
  10.       type: Number,
  11.       required: true
  12.     }
  13.   }
  14. })

看起来简单多了！这样代码精简很多，但是需要非常熟悉 Vue 的实例属性。在这个例子中，你需要知道，向组件中传递不带 v-slot 指令的子节点时，比如 anchored-heading 中的 Hello world!，这些子节点被存储在组件实例中的 $slots.default 中。如果你还不了解，在深入渲染函数之前推荐阅读实例属性 API。