Vue_template和render

• template

  一個(gè)替換掛載的元素模板。掛載元素的內(nèi)容都將被忽略，除非模板的內(nèi)容有分發(fā)插槽。

  • 封裝組件：h1-h6標(biāo)簽

  <div id="app">
      <h-title level="1">h1標(biāo)題</h-title>
      <h-title level="2">h2標(biāo)題</h-title>
      <h-title level="3">h3標(biāo)題</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

  字符串模板的代替方案，允許你發(fā)揮 JavaScript 最大的編程能力。該渲染函數(shù)接收一個(gè) createElement 方法作為第一個(gè)參數(shù)用來(lái)創(chuàng)建 VNode。

  Vue中的Render函數(shù)中有一個(gè)參數(shù)：h，其實(shí)這個(gè)h叫做createElement。Render函數(shù)將createElement的返回值放到了HTML中

  createElement這個(gè)函數(shù)中有3個(gè)參數(shù)

  • 第一個(gè)參數(shù)（必要參數(shù)）：主要用于提供DOM的html內(nèi)容（標(biāo)簽名稱(chēng)），類(lèi)型可以是字符串、對(duì)象或函數(shù)
  • 第二個(gè)參數(shù)（類(lèi)型是對(duì)象，可選）：用于設(shè)置這個(gè)DOM的一些樣式、屬性、傳的組件的參數(shù)、綁定事件等

  {
    // 與 `v-bind:class` 的 API 相同，
    // 接受一個(gè)字符串、對(duì)象或字符串和對(duì)象組成的數(shù)組
    'class': {
      foo: true,
      bar: false
    },
    // 與 `v-bind:style` 的 API 相同，
    // 接受一個(gè)字符串、對(duì)象，或?qū)ο蠼M成的數(shù)組
    style: {
      color: 'red',
      fontSize: '14px'
    },
    // 普通的 HTML attribute
    attrs: {
      id: 'foo'
    },
    // 組件 prop
    props: {
      myProp: 'bar'
    },
    // DOM 屬性
    domProps: {
      innerHTML: 'baz'
    },
    // 事件監(jiān)聽(tīng)器在 `on` 屬性?xún)?nèi)，
    // 但不再支持如 `v-on:keyup.enter` 這樣的修飾器。
    // 需要在處理函數(shù)中手動(dòng)檢查 keyCode。
    on: {
      click: this.clickHandler
    },
    // 僅用于組件，用于監(jiān)聽(tīng)原生事件，而不是組件內(nèi)部使用
    // `vm.$emit` 觸發(fā)的事件。
    nativeOn: {
      click: this.nativeClickHandler
    },
    // 自定義指令。注意，你無(wú)法對(duì) `binding` 中的 `oldValue`
    // 賦值，因?yàn)?Vue 已經(jīng)自動(dòng)為你進(jìn)行了同步。
    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)
    },
    // 如果組件是其它組件的子組件，需為插槽指定名稱(chēng)
    slot: 'name-of-slot',
    // 其它特殊頂層屬性
    key: 'myKey',
    ref: 'myRef',
    // 如果你在渲染函數(shù)中給多個(gè)元素都應(yīng)用了相同的 ref 名，
    // 那么 `$refs.myRef` 會(huì)變成一個(gè)數(shù)組。
    refInFor: true
  }
  

  • 第三個(gè)參數(shù)（類(lèi)型是數(shù)組，數(shù)組元素類(lèi)型是VNode，可選）：主要是指該結(jié)點(diǎn)下還有其他結(jié)點(diǎn)，用于設(shè)置分發(fā)的內(nèi)容，包括新增的其他組件。注意，組件樹(shù)中的所有VNode必須是唯一的.

    用this.$slots.default進(jìn)行接收

  • 同樣是封裝組件：h1-h6標(biāo)簽

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

  目前只有6個(gè)<h>標(biāo)簽，便能體現(xiàn)render封裝的便捷。如果有數(shù)十個(gè)標(biāo)簽需要不同的樣式時(shí)，更容易體現(xiàn)出render函數(shù)適合復(fù)雜組件的封裝。

• render與template的區(qū)別

  1. VUE一般使用template來(lái)創(chuàng)建HTML，而使用javascript來(lái)創(chuàng)建html要使用render函數(shù)。
  2. template邏輯簡(jiǎn)單，理解起來(lái)相對(duì)容易，但靈活性不足；render渲染方式可以將JS發(fā)揮到極致，通過(guò)createElement的方式創(chuàng)建虛擬DOM。其邏輯性較強(qiáng)，適合復(fù)發(fā)的組件封裝。
  3. render(高)的性能要比tempate(低)要高。
  4. render函數(shù)的優(yōu)先級(jí)大于template（優(yōu)先級(jí)可能會(huì)誤導(dǎo)我們的理解，換成權(quán)重更適合）但是要注意的是Mustache(雙花括號(hào))語(yǔ)法就不能再次使用。

  • 例證render與template的區(qū)別，第4點(diǎn)：

  <div id="app">
      <h1></h1>
  </div>
  

  let vm = new Vue({
    el:"#app",
    data:{
        age:18
    },
    render:function(createElement){
      // return createElement('h1', '我是render出來(lái)的HTML，年齡{{age}}');//不能使用“Mustache”語(yǔ)法 (雙大括號(hào))
       return createElement('h1', '我是render出來(lái)的HTML，年齡'+this.age);
      },
    template:"<div><p>我template出來(lái)的，年齡{{age}}</p></div>",
  });
  

  • 渲染結(jié)果

    render權(quán)重高.png