Vue_template和render

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