快捷導(dǎo)航

Vue2.x中的Render函數(shù)詳解

更新時(shí)間：2017年05月30日 23:51:58 作者：leung_blog

通常開(kāi)發(fā)vue我們使用的是模板語(yǔ)法，其實(shí)還有和react相同的語(yǔ)法，那就是render函數(shù)，同樣支持jsx語(yǔ)法。Vue 的模板實(shí)際是編譯成了 render 函數(shù)。

Render函數(shù)是Vue2.x版本新增的一個(gè)函數(shù)；使用虛擬dom來(lái)渲染節(jié)點(diǎn)提升性能，因?yàn)樗腔贘avaScript計(jì)算。通過(guò)使用createElement(h)來(lái)創(chuàng)建dom節(jié)點(diǎn)。createElement是render的核心方法。其Vue編譯的時(shí)候會(huì)把template里面的節(jié)點(diǎn)解析成虛擬dom；

什么是虛擬dom?

虛擬dom不同于真正的dom，它是一個(gè)JavaScript對(duì)象。當(dāng)狀態(tài)發(fā)生變化的時(shí)候虛擬dom會(huì)進(jìn)行一個(gè)diff判斷/運(yùn)算；然后判斷哪些dom是需要被替換的而不是全部重繪，所以性能會(huì)比dom操作高很多。

下面看一張Aresn大神總結(jié)的一張圖：

Vue2.x版本中VNode屬性：

tag:當(dāng)前節(jié)點(diǎn)標(biāo)簽名，

data：當(dāng)前節(jié)點(diǎn)數(shù)據(jù)對(duì)象，

children：子節(jié)點(diǎn)數(shù)組，

text：當(dāng)前節(jié)點(diǎn)文本，

elm：當(dāng)前虛擬節(jié)點(diǎn)對(duì)應(yīng)的真實(shí)dom節(jié)點(diǎn)，

ns：節(jié)點(diǎn)的namespace( 名稱(chēng)空間)，

content：編譯作用域，

functionalContext：函數(shù)化組件的作用域，即全局上下文，

key：節(jié)點(diǎn)標(biāo)識(shí)，有利于patch優(yōu)化，

componentOptions：創(chuàng)建組件實(shí)例時(shí)的options，

child：當(dāng)前節(jié)點(diǎn)對(duì)應(yīng)的組件實(shí)例，

parent：組件的占位節(jié)點(diǎn)，

raw：原始html，

isStatic：是否是靜態(tài)節(jié)點(diǎn)，

isRootInsert：是否作為跟節(jié)點(diǎn)插入，若被<transition>包裹的節(jié)點(diǎn)，該屬性值為false，

isComment：是否為注釋節(jié)點(diǎn)，

isCloned：是否為克隆節(jié)點(diǎn)，

isOnce：是否只改變(渲染)一次，或是否有v-once指令；

其中這里面又有幾種VNode類(lèi)型：

Aresn大神總結(jié)的很好：

TextVNode：文本節(jié)點(diǎn)，

ElementVNode：普通元素節(jié)點(diǎn)，

ComponentVNode：組件節(jié)點(diǎn)，

EmptyVNode：空節(jié)點(diǎn)，或者說(shuō)是沒(méi)有內(nèi)容的注釋節(jié)點(diǎn)，

CloneVNode：克隆節(jié)點(diǎn)，可以是以上任意類(lèi)型節(jié)點(diǎn)

說(shuō)了那么多；到底什么時(shí)候用虛擬dom才比較好呢？其實(shí) 我們使用的單文件組件就已經(jīng)夠好了。但是當(dāng)某些代碼冗余的時(shí)候如果寫(xiě)單文件組件的話(huà)會(huì)有好多重復(fù)的內(nèi)容；

接下來(lái)介紹其核心函數(shù)；

createElement：

createElement接收3個(gè)參數(shù)：

第一個(gè)參數(shù)可以是HTML標(biāo)簽名，組件或者函數(shù)都可以；此參數(shù)是必須的；

第二個(gè)為數(shù)據(jù)對(duì)象（可選）；

第三個(gè)為子節(jié)點(diǎn)（可選）。

附上一個(gè)非常簡(jiǎn)單的createElement函數(shù)demo；

 var app = new Vue({
   el:"#app",
   render:createElement => {
     eturn createElement(
       'h2',
       [
         createElement(
           'a',
           {
             domProps:{
               href:"#biaoti"
             }
           },
           "標(biāo)題"
         )
        ]      
       );
 
     }
 });

這只是一個(gè)createElement函數(shù)的使用，而Vue2中VNodeData

class: v-bind/:class

style:v-bind/:style

attrs:dom屬性，如id

props:props,

on:自定義事件等，

nativeOn:原生事件

像這些也可以在render函數(shù)中實(shí)現(xiàn)，若VNode是組件或含有組件的slot，那么VNode必須是唯一。

像平常開(kāi)發(fā)過(guò)程中單文件組件中template寫(xiě)法更為簡(jiǎn)單，可讀性也高。如果是webpack進(jìn)行打包的話(huà)template也會(huì)預(yù)編譯成render函數(shù)。

這里demo栗子暫時(shí)還沒(méi)寫(xiě)那么多。這里只是一個(gè)簡(jiǎn)單的介紹。若有更好的歡迎大家一起學(xué)習(xí)討論。

您可能感興趣的文章: