render函数概述

除了 <template> ，还可以使用 render 函数去让Vue在页面中显示内容。

当将一个函数传递给Vue实例的 render 属性时，该函数会传入一个 createElement 函数，并通过它来指定需要在页面上显示的HTML。

示例：

  1. <script>
  2.   new Vue({
  3.     el: '#app',
  4.     render(createElement){
  5.       return createElement('h1', 'hello world!');
  6.     }
  7.   });
  8. </script>

createElement 接受三个参数：将要生成的元素的标签名称、包含配置信息的数据对象和一个子节点或是包含子节点的数组。

标签名称

标签名称是必需的参数。它可以是一个字符串，也可以是一个返回字符串的函数。

render函数中可以访问 this ，所以可以将标签名称设置为 data 对象的某个属性、prop、计算属性等。

示例：

  1. <script>
  2.     new Vue({
  3.         el:'#app',
  4.         render(createElement){
  5.             return createElement(this.tagName, 'Hello world!');
  6.         },
  7.         data:{
  8.             tagName:'h1'
  9.         }
  10.     });
  11. </script>

数据对象

数据对象是设置一系列配置属性的地方，是标签名称与闭合尖括号之间的东西。

例如，对下面这行代码来说，

  1. <custom-button type="submit" v-bind:text="buttonText">

其相应的属性就是： type="submit" v-bind:text="buttonText" 。

在这个示例中， type 是传递给组件的一个普通的HTML属性，而 text 是一个组件 prop ，与变量 buttonText 绑定。

使用createElement 可以这样去写：

  1. <script>
  2.     new Vue({
  3.         el:' #app',
  4.         render(createElement){
  5.             return createElement('custom-button',{
  6.                 attrs:{
  7.                     type:'submit'
  8.                 },
  9.                 props:{
  10.                     text:this.buttonText
  11.                 }
  12.             });
  13.         }
  14.     });
  15. </script>

这里不再使用v-bind了，因为可以直接通过this.buttonText引用变量。由于this.buttonText是render函数的一个依赖，无论何时只要buttonText更新，render函数就会被再次调用，然后DOM也会自动更新，这与template是一致的。

所有的选项：

  1. //HTML特性
  2. attrs:{
  3.     type:'submit'
  4. },
  6. //传递给组件的prop
  7. props:{
  8.     text:'单击我！'
  9. },
  11. //DOM属性，比如innerHTML(而不是v-html)
  12. domProps:{
  13.     innerHTML:'一些HTML'
  14. },
  16. //事件侦听器
  17. on:{
  18.     click: this.handleclick
  19. },
  21. //与slot="exampleSlot"相同，当组件是某个组件的子组件时使用
  22. slot:'exampleSlot',
  24. //与key="exampleKey"相同，用于某个循环产生的组件
  25. key:'exampleKey',
  27. //与ref="exampleRef"相同
  28. ref:'exampleRef',
  30. //与v-bind:class="['example-class',{'conditional-class':true}]相同
  31. class: ['example-class', {'conditional-class': true}],
  33. //与v-bind:style="{backgroundColor:'red'}”相同
  34. style:{backgroundColor:'red'}

子节点

子节点可以是一个数组也可以是一个字符串。如果是一个字符串，那么它的值会作为元素的文本内容被输出；如果是一个数组，可以在数组中再次调用createElement函数，来构建一个复杂的DOM树。
以下面这个模板为例：

  1. <template>
  2.     <div>
  3.     <button v-on:click="count++">单击增加计数</button>
  4.     <p>已经单击了{{counter}}次。</p>
  5.   </div>
  6. </template>

使用createElement 可以这样去写：

  1. render(createElement){
  2.     return createElement(
  3.         'div',
  4.         [
  5.             createElement(
  6.                 'button',
  7.                 {
  8.                     on:{
  9.                         click:()=>this.count++,
  10.                     }
  11.                 },
  12.                 '单击增加计数'
  13.             ),
  14.             createElement(
  15.                 'p',
  16.                 你已经单击了按钮 ${this.counter}次。
  17.             )
  18.         ]
  19.     );
  20. }