Vue_template和render

• template

  一個替換掛載的元素模板。掛載元素的內(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ù)接收一個 createElement 方法作為第一個參數(shù)用來創(chuàng)建 VNode。

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

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

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

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

  • 第三個參數(shù)（類型是數(shù)組茎用，數(shù)組元素類型是VNode，可選）：主要是指該結(jié)點下還有其他結(jié)點睬罗，用于設(shè)置分發(fā)的內(nèi)容轨功，包括新增的其他組件。注意容达，組件樹中的所有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個<h>標(biāo)簽古涧，便能體現(xiàn)render封裝的便捷。如果有數(shù)十個標(biāo)簽需要不同的樣式時花盐，更容易體現(xiàn)出render函數(shù)適合復(fù)雜組件的封裝羡滑。

• render與template的區(qū)別

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

  • 例證render與template的區(qū)別饺汹，第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>",
  });
  

  • 渲染結(jié)果

    render權(quán)重高.png