Vue_template和render

template

一个替换挂载的元素模板。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。

封装组件：h1-h6标签

<div id="app">
    <h-title level="1">h1标题</h-title>
    <h-title level="2">h2标题</h-title>
    <h-title level="3">h3标题</h-title>
</div>

Vue.component("h-title", {
    template: `
        <div>
            <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>    
        </div>
    `,
    props: {
        level: {
            type: String
        }
    }
})

render

字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

Vue中的Render函数中有一个参数：h，其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中

createElement这个函数中有3个参数

第一个参数（必要参数）：主要用于提供DOM的html内容（标签名称），类型可以是字符串、对象或函数

第二个参数（类型是对象，可选）：用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件等
{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 属性内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层属性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}
第三个参数（类型是数组，数组元素类型是VNode，可选）：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有VNode必须是唯一的.

用this.$slots.default进行接收

同样是封装组件：h1-h6标签

  Vue.component("h-title",{
      render:function(h){
          return h(
              “h” + this.level,
              {
                  attrs:{
                      “data-id”:10        
                  }
              },
              this.$slots.default
          )
      },
      props:{
          level:{
              type:String
          }
      }
  })

目前只有6个<h>标签，便能体现render封装的便捷。如果有数十个标签需要不同的样式时，更容易体现出render函数适合复杂组件的封装。

render与template的区别
1. VUE一般使用template来创建HTML，而使用javascript来创建html要使用render函数。
2. template逻辑简单，理解起来相对容易，但灵活性不足；render渲染方式可以将JS发挥到极致，通过createElement的方式创建虚拟DOM。其逻辑性较强，适合复发的组件封装。
3. render(高)的性能要比tempate(低)要高。
4. render函数的优先级大于template（优先级可能会误导我们的理解，换成权重更适合）但是要注意的是Mustache(双花括号)语法就不能再次使用。
- 例证render与template的区别，第4点：
```
<div id="app">
    <h1></h1>
</div>
```
```
let vm = new Vue({
  el:"#app",
  data:{
      age:18
  },
  render:function(createElement){
    // return createElement('h1', '我是render出来的HTML，年龄{{age}}');//不能使用“Mustache”语法 (双大括号)
     return createElement('h1', '我是render出来的HTML，年龄'+this.age);
    },
  template:"<div><p>我template出来的，年龄{{age}}</p></div>",
});
```
- 渲染结果
  render权重高.png