vue中render和template有什么关系 vue template render

大家好，我是金庆大叔。
首先我们看看官方文档的说法：

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

我的理解是，render 能做的 template 能也能做。但是某些场景下，render 比 template 做的更好，让你少些很多代码。少很多if判断，早点return. 对于一个追求代码高效的程序员。有必要理解vue 的Render.

由于我一直用的是webpack+vue-cli+vue2.0的模块化开发的方式。所以我的例子会根据官方的例子进行改版。

以下是我想到的一些应用场景。
1.当你需要根据父组件的数据 ，动态改变子组件的显示内容，而子组件的内容大部分是重复的但是代码很多时。

父组件代码：

<template>
  <div id="app">
 <!--把要传到子组件的数字绑定到childLevel变量中，到子组件中用props接住-->
    <child :childLevel="level"></child>
  </div>
</template>

<script>
import child from '@/components/child'
export default {
  name: 'father',
  components: {
    child
  },
  data () {
    return {
      level: 1
    }
  }
}
</script>

<style scoped>

</style>

子组件代码：

<template>
  <div>
    <h1 v-if="childLevel === 1">
 <!-- 这里v-if="childLevel === 1"的意思是如果你父组件传下来的childLevel===1，就显示第一个h1的东西，如果你父组件传下来的childLevel===2就显示下面的h2的东西。也就是说，这里的逻辑就是根据父组件data(){} 中的level的数字，来显示你子组件的对应数字的h(n)
      下方的slot插槽，其实这里可以写其他任何东西，只是用slot在此例子中的场景是重复出现多次，现在要先写的复杂矮戳穷一点。最后用render函数的方法用一句代码搞定，显得高大上一点。
      -->
      <slot>111</slot>
    </h1>
    <h2 v-if="childLevel === 2">
      <slot>222</slot>
    </h2>
    <h3 v-if="childLevel === 3">
      <slot>333</slot>
    </h3>
    <h4 v-if="childLevel === 4">
      <slot>444</slot>
    </h4>
    <h5 v-if="childLevel === 5">
      <slot>555</slot>
    </h5>
    <h6 v-if="childLevel === 6">
      <slot>666</slot>
    </h6>
  </div>
</template>

<script>
export default {
  name: 'child',
  props: { // props对象接住父组件传下来的东西。不懂可以先去恶补vue的props
    childLevel: {
      type: Number, // 指定参数的类型 其他的还有Array Object等等
      required: true
    }
  }
}
</script>

<style scoped>

</style>

这时，你手动去修改父组件的data里面的level的数值，你会发现显示的内容就做相应的改变。下面让我们增加几个按钮，写一个方法来操控一下。

<template>
  <div id="app">
    <!--把要传到子组件的数字绑定到childLevel变量中，到子组件用props接住-->
    <child :childLevel="level"></child>
    <!-- 增加的按钮在此 -->
    <button @click="changeNumber(1)">h1</button>
    <button @click="changeNumber(2)">h2</button>
    <button @click="changeNumber(3)">h3</button>
    <button @click="changeNumber(4)">h4</button>
    <button @click="changeNumber(5)">h5</button>
    <button @click="changeNumber(6)">h6</button>
  </div>
</template>

<script>
import child from '@/components/child'
export default {
  name: 'father',
  components: {
    child
  },
  data () {
    return {
      level: 1
    }
  },
  methods: {// 增加的方法在此
    changeNumber (level) {
      this.level = level
    }
  }
}
</script>

<style>

</style>

好了，vue文档大概的意识就是说，h1-h6只是想改变字体的大小。而slot中的东西是不变的。既然只是改变1-6几个数字，就tm没必要写那么多代码。接下来用render函数的方式实现，却发现遇到了坑，后来知道，其实既然选择的.vue 单文件的开发模式，在 .vue文件中是无法实用render的。因为这种模式，vue的实例只有一个。在组件里就无法再实例一个vue了。所以也就无法做到将render渲染到.vue的组件中。