小編這次要給大家分享的是淺談vue渲染方式render和template，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)建站主要從事網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)高唐,10余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

render函數(shù)詳解

Vue中的Render函數(shù)中有一個參數(shù)，這個參數(shù)是一個函數(shù)通常我們叫做h。其實這個h叫做createElement。Render函數(shù)將createElement的返回值放到了HTML中

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

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

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

第三個參數(shù)（類型是數(shù)組，數(shù)組元素類型是VNode，可選）：主要是指該結(jié)點下還有其他結(jié)點，用于設(shè)置分發(fā)的內(nèi)容，包括新增的其他組件。注意，組件樹中的所有VNode必須是唯一的

// @return {VNode}
createElement(
 // {String | Object | Function}
 // 一個HTML標(biāo)簽字符串，組件選項對象，或者一個返回值類型為String/Object的函數(shù)。該參數(shù)是必須的
 'div',

 // {Object}
 // 一個包含模板相關(guān)屬性的數(shù)據(jù)對象，這樣我們可以在template中使用這些屬性，該參數(shù)是可選的。
{
   attrs: {
    name: headingId,
    href: '#'+headingId
  },
   style: {
    color: 'red',
    fontSize: '20px'
  },
   'class': {
    foo: true,
    bar: false
   },
   // DOM屬性
   domProps: {
     innerHTML: 'baz'
   },
   // 組件props
    props: {
     myProp: 'bar'
   },
    // 事件監(jiān)聽基于 'on'
    // 所以不再支持如 'v-on:keyup.enter' 修飾語
    // 需要手動匹配 KeyCode 
    on: {
      click: function(event) {
        event.preventDefault();
        console.log(111);
     }
    }
 }

 // {String | Array}
 // 子節(jié)點（VNodes）由 createElement() 構(gòu)建而成?？蛇x參數(shù)
 // 或簡單的使用字符串來生成的 "文本節(jié)點"。
[
  'xxxx',
  createElement('h2', '一則頭條'),
  createElement(MyComponent, {
   props: {
    someProp: 'xxx'
  }
 }),
  this.$slots.default
]
)

什么時候用render函數(shù)？

假設(shè)我們要封裝一套按鈕組件，按鈕有四個樣式(success、error、warning、default)。首先，你可能會想到如下實現(xiàn)

雖然我們這樣實現(xiàn)沒有問題，但是如果現(xiàn)在有十幾個樣式的情況下我們就需要寫N多個判斷，如果遇到了這種情況我們就可以選擇使用render函數(shù)。

其實簡單的來說就是template適合簡單的組件封裝，然后render函數(shù)適合復(fù)雜的組件封裝

template與render函數(shù)對比

template----html的方式做渲染
render----js的方式做渲染

render（提供）是一種編譯方式
render里有一個函數(shù)h，這個h的作用是將單文件組件進行虛擬DOM的創(chuàng)建，然后再通過render進行解析。
h就是createElement()方法：createElement(標(biāo)簽名稱,屬性配置,children)

template也是一種編譯方式，但是template最終還是要通過render的方式再次進行編譯。

區(qū)別：
        1、render渲染方式可以讓我們將js發(fā)揮到極致，因為render的方式其實是通過createElement()進行虛擬DOM的創(chuàng)建。邏輯性比較強，適合復(fù)雜的組件封裝。
        2、template是類似于html一樣的模板來進行組件的封裝。
        3、render的性能比template的性能好很多
        4、render函數(shù)優(yōu)先級大于template

案例一：template和render的方式渲染標(biāo)題標(biāo)簽：

  
  
  


  

    標(biāo)題
    標(biāo)題
    標(biāo)題
  
  
  

案例二：render方式模擬button：

  
  
  
  


  

    成功
    提示
    報錯
    默認(rèn)
  
  
  

看完這篇關(guān)于淺談vue渲染方式render和template的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。