前言

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

render的作用

官網(wǎng)示例入口

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

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)場(chǎng)景中用 template 實(shí)現(xiàn)起來(lái)代碼冗長(zhǎng)繁瑣而且有大量重復(fù)，這個(gè)時(shí)候使用就可以極大的簡(jiǎn)化代碼。

render函數(shù)講解

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

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

return createEement(, {}, [])

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

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

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

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

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

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

render和template的區(qū)別

相同之處：

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

不同之處：

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

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

render舉例

如一次封裝一套通用按鈕組件，按鈕有四個(gè)樣式(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í)候沒有問(wèn)題，但是一旦按鈕數(shù)量變多，這樣寫就會(huì)顯得特別冗長(zhǎng)，在這個(gè)時(shí)候，就需要render函數(shù)。

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

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

通過(guò)傳入的type動(dòng)態(tài)填入class，通過(guò)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é)

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

最新評(píng)論