前言

在平時(shí)編程時(shí)，大部分是通過template來創(chuàng)建html。但是在一些特殊的情況下，使用template方式時(shí)，就無法很好的滿足需求，在這個時(shí)候就需要 通過JavaScript 的編程能力來進(jìn)行操作。此時(shí)，就到了render函數(shù)展示拳腳去時(shí)候了。

render的作用

官網(wǎng)示例入口

在官網(wǎng)的這里示例中，使用組件，將相同的內(nèi)容通過solt放進(jìn)h1-h6的標(biāo)簽中，在使用傳統(tǒng)方式時(shí)，代碼不僅冗長，而且在每一個級別的標(biāo)題中重復(fù)書寫了?<slot></slot>，在要插入錨點(diǎn)元素時(shí)還要再次重復(fù)。而使用render函數(shù)后，代碼就精簡了很多。

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 標(biāo)簽名稱
      this.$slots.default // 子節(jié)點(diǎn)數(shù)組
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

render函數(shù)的作用是，當(dāng)場景中用 template 實(shí)現(xiàn)起來代碼冗長繁瑣而且有大量重復(fù)，這個時(shí)候使用就可以極大的簡化代碼。

render函數(shù)講解

在使用render函數(shù)中，會使用到一個參數(shù)createElement，而這個createElement參數(shù)，本質(zhì)上，也是一個函數(shù)，是vue中構(gòu)建虛擬dom所使用的工具。下面就圍繞著這個createElement來看一下。

在createelement方法，有三個參數(shù)：

return createEement(, {}, [])

1.第一個參數(shù)（必要參數(shù)）：主要是用于提供dom中的html內(nèi)容，類型可以是字符串、對象或函數(shù)。

2.第二個參數(shù)（對象類型，可選）：用于設(shè)置這個dom中的一些樣式、屬性、傳的組件的參數(shù)、綁定事件之類的。

3.第三個參數(shù)（類型是數(shù)組，數(shù)組元素類型是VNode,可選）：主要用于設(shè)置分發(fā)的內(nèi)容，如新增的其他組件。

注意：組件樹中的所有vnode必須是唯一的

通過傳入createElement參數(shù)，創(chuàng)建虛擬節(jié)點(diǎn)，然后再將節(jié)點(diǎn)返回給render返回出去。

總的來說，render函數(shù)的本質(zhì)就是創(chuàng)建一個虛擬節(jié)點(diǎn)。

render和template的區(qū)別

相同之處：

render 函數(shù)?跟?template?一樣都是創(chuàng)建 html 模板

不同之處：

• Template適合邏輯簡單，render適合復(fù)雜邏輯。
• 使用者template理解起來相對容易，但靈活性不足；自定義render函數(shù)靈活性高，但對使用者要求較高。
• render的性能較高，template性能較低。
• 使用render函數(shù)渲染沒有編譯過程，相當(dāng)于使用者直接將代碼給程序。所以，使用它對使用者要求高，且易出現(xiàn)錯誤
• Render 函數(shù)的優(yōu)先級要比template的級別要高，但是要注意的是Mustache(雙花括號)語法就不能再次使用

注意：template和render不能一起使用，否則無效

render舉例

如一次封裝一套通用按鈕組件，按鈕有四個樣式(success、error、warning、default)。

template方式是如下：

 <div class="btn btn-success" v-if="type === 'success'">{{ text }}</div>
 <div class="btn btn-danger" v-else-if="type === 'danger'">{{ text }}</div>
 <div class="btn btn-warning" v-else-if="type === 'warning'">{{ text }}</div>

這樣寫在按鈕少的時(shí)候沒有問題，但是一旦按鈕數(shù)量變多，這樣寫就會顯得特別冗長，在這個時(shí)候，就需要render函數(shù)。

根據(jù)情況生成按鈕DOM

在使用render函數(shù)前，需要先把template標(biāo)簽去掉，只保留邏輯層。

通過傳入的type動態(tài)填入class，通過inderText將內(nèi)容添加入DOM中。

render(h) {
  return h('div', {
   class: {
    btn: true,
    'btn-success': this.type === 'success',
    'btn-danger': this.type === 'danger',
    'btn-warning': this.type === 'warning'
   },
   domProps: {
    innerText: this.text
   },
   on: {
    click: this.handleClick
   }
  });
 },

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

最新評論