Vue | Vue深入浅出——Vue中的render函数详解

1.render函数

在编写vue单文件的大多数情况下，我们都是使用template模板来创建HTML。然而在一些条件判断比较复杂的场景下，使用JavaScript去描绘HTML的生成逻辑会显得更加的简洁直观。

使用Vue官网的例子来简单说明：

如果自己在开发的时候，编写的每个标题（包括h1~h6）都需要带锚点，如下所示：

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

如果用template模板进行编写，会如下所示：

<template>
  <h1 v-if="level === 1">
    <anchor :name="name" :content="content"></anchor>
  </h1>
  <h2 v-else-if="level === 2">
    <anchor :name="name" :content="content"></anchor>
  </h2>
  <h3 v-else-if="level === 3">
    <anchor :name="name" :content="content"></anchor>
  </h3>
  <h4 v-else-if="level === 4">
    <anchor :name="name" :content="content"></anchor>
  </h4>
  <h5 v-else-if="level === 5">
    <anchor :name="name" :content="content"></anchor>
  </h5>
  <h6 v-else-if="level === 6">
    <anchor :name="name" :content="content"></anchor>
  </h6>
</template>
<script>
export default {
  name:'anchor-header',
  props:{
    level:Number,
    name:String,
    content:String
  },
  components:{
    'anchor':{
      props:{
        content:String,
        name:String
      },
      template:'<a :id="name" :href="`#${name}`"> {
  {content}}</a>'
    }
  }
}
</script>

显然代码冗长累赘。但如果用render函数来编写则如下所示：

<script>
export default {
  name:'anchor-header',
  props:{
    level:Number,
    name:String,
    content:String
  },
  render:function(createElement){
    const anchor={
      props:{
        content:String,
        name:String
      },
      template:'<a :id&