渲染函数 & JSX

本节目标：理解“渲染函数 & JSX”的核心思路，并能把它用于实际开发或面试表达。 Vue ==推荐在绝大多数情况下使用模板来创建你的== HTML==。== ==然而在一些场景中，你真的需要== JavaScript ==的完全编程的能力。== ==这时你可以用====渲染函数====，它比模板更接近编译器。==

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

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

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

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

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

<script type="text/x-template" id="anchored-heading-template">  <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></script>
Vue.component('anchored-heading', {  template: '#anchored-heading-template',  props: {    level: {      type: Number,      required: true    }  }})

==这里用模板并不是最好的选择：不但代码冗长，而且在每一个级别的标题中重复书写了== \<slot\>\</slot\>==，在要插入锚点元素时还要再次重复。虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。那么，我们来尝试使用== render ==函数重写上面的例子：==

Vue.component('anchored-heading', {  render: function (createElement) {    return createElement(      'h' + this.level,   //

==标签名称==

      this.$slots.default //

==子节点数组==

    )  },  props: {    level: {      type: Number,      required: true    }  }})

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