目錄

• 前言
• render的作用
• render函式講解
• render和tempwww.cppcns.comlate的區別
• render舉例
• 總結

前言

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

render的作用

官網示例入口

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

.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.第一個引數（必要引數）：主要是用於提供doQjJKkm中的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 === 'warninwww.cppcns.comg'
   },domProps: {
    innerText: this.text
   },on: {
    click: this.handleClick
   }
  });
 },

總結

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