VUE render函數使用和詳解

Posted on by

前言

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

render的作用

官網示例入口

在官網的這裡示例中，使用組件，將相同的內容通過solt放進h1-h6的標簽中，在使用傳統方式時，代碼不僅冗長，而且在每一個級別的標題中重復書寫瞭 <slot></slot>，在要插入錨點元素時還要再次重復。而使用render函數後，代碼就精簡瞭很多。

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 標簽名稱
      this.$slots.default // 子節點數組
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

render函數的作用是，當場景中用 template 實現起來代碼冗長繁瑣而且有大量重復，這個時候使用就可以極大的簡化代碼。

render函數講解

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

在createelement方法，有三個參數：

return createEement(, {}, [])

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

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

3.第三個參數（類型是數組，數組元素類型是VNode,可選）：主要用於設置分發的內容，如新增的其他組件。

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

通過傳入createElement參數，創建虛擬節點，然後再將節點返回給render返回出去。

總的來說，render函數的本質就是創建一個虛擬節點。

render和template的區別

相同之處：

render 函數 跟 template 一樣都是創建 html 模板

不同之處：

  • Template適合邏輯簡單，render適合復雜邏輯。
  • 使用者template理解起來相對容易，但靈活性不足；自定義render函數靈活性高，但對使用者要求較高。
  • render的性能較高，template性能較低。
  • 使用render函數渲染沒有編譯過程，相當於使用者直接將代碼給程序。所以，使用它對使用者要求高，且易出現錯誤
  • Render 函數的優先級要比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>

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

根據情況生成按鈕DOM

在使用render函數前，需要先把template標簽去掉，隻保留邏輯層。

通過傳入的type動態填入class，通過inderText將內容添加入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
   }
  });
 },

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：