vue中的h函數(shù)

在講h函數(shù)之前，我們先來了解下虛擬dom：

虛擬dom簡單來說就是一個(gè)普通的JavaScript對象，包含tag，props，children三個(gè)屬性。。。

<div id="app">
  <p className="text">lxc</p>
</div>

上邊的HTML代碼轉(zhuǎn)為虛擬DOM如下：

{
    tag:"div",
    props:{
        id:"app"
    },
    children:[
        {
            tag:"p",
            props:{
                className:"text"
            },
            children:[
                "lxc"
            ]
        }
    ]
}

該對象就是所謂的虛擬dom，因?yàn)閐om對象是屬性結(jié)構(gòu)，所以使用JavaScript對象就可以簡單表示。而原生dom有許多屬性、事件，即使創(chuàng)建一個(gè)空div也要付出昂貴的代價(jià)。而虛擬dom提升性能的點(diǎn)在于DOM發(fā)生變化的時(shí)候，通過diff算法對比，計(jì)算出需要更改的DOM，只對變化的DOM進(jìn)行操作，而不是更新整個(gè)視圖。。。

在vue腳手架中，我們經(jīng)常會(huì)看到這樣一段代碼：

  const app = new Vue({
    ··· ···
    render: h => h(App)
  })

這個(gè)render方法也可以寫成這樣：

  const app = new Vue({
    ··· ···
    render:function(createElement){
        return createElment(App)
    }
  })

h函數(shù)就是vue中的createElement方法，這個(gè)函數(shù)作用就是創(chuàng)建虛擬dom，追蹤dom變化的。。。

在看一個(gè)例子：寫一個(gè)main.jsx文件

function getVDOM(){
    return (
        <div id="app">
            <p nameProperty="lxc">my name is lxc</p>
        </div>
    )
}

使用bable編譯之后：

上邊代碼：最終html代碼會(huì)被編譯成h函數(shù)的渲染形式。返回的是一個(gè)虛擬DOM對象，通過diff算法，來追蹤自己要如何改變真實(shí)DOM。

function h(tag,props,...children){//h函數(shù)，返回一個(gè)虛擬dom對象
    return {
        tag,
        props:props || {},
        children:children.flat()//扁平化數(shù)組，降至一維數(shù)組
    }
}

我們在看下官方文檔所說的createElement函數(shù)，它返回的實(shí)際上不是一個(gè)DOM元素，更準(zhǔn)確的名字是：createNodeDescription（直譯為——創(chuàng)建節(jié)點(diǎn)描述），因?yàn)樗男畔?huì)告訴vue頁面上需要渲染什么樣的節(jié)點(diǎn)，包括其子節(jié)點(diǎn)的描述信息。

我們把這樣的節(jié)點(diǎn)叫做：“虛擬節(jié)點(diǎn)（virtual node）”，也常簡寫為：“VNode”。（看了以上的案例相信在看剛這段話思路會(huì)更加清晰）

createElment參數(shù)（也就是h函數(shù)）

我們還是以官方文檔的解釋來講，createElment函數(shù)接受三個(gè)參數(shù)，分別是：

• 參數(shù)一：tag（標(biāo)簽名）、組件的選項(xiàng)對象、函數(shù)（必選）；
• 參數(shù)二：一個(gè)對象，標(biāo)簽的屬性對應(yīng)的數(shù)據(jù)（可選）；
• 參數(shù)三：子級虛擬節(jié)點(diǎn)，字符串形式或數(shù)組形式，子級虛擬節(jié)點(diǎn)也需要使用createElement構(gòu)建。

來一個(gè)小例子：

<!-- 在模板中渲染 -->
<div id="app">
    {{name}}
    <p>{{age}}</p>
</div>


<!-- 在render函數(shù)中渲染 -->
render:function(createElement){
  return createElement("div",{id:"lxc"},[this.name,createElement("p",this.age)])
}

上邊代碼，值得注意的是，如果父元素有文本內(nèi)容，在render函數(shù)中寫的時(shí)候，內(nèi)容寫在參數(shù)三——數(shù)組的第一個(gè)參數(shù)中。（建議大家動(dòng)手寫一寫，理解的會(huì)更透徹。）

在來一個(gè)官方文檔例子：

<!-- 在模板中渲染 -->
<ul v-if="items.length">
      <li v-for="item in items">{{item.name}}</li>
</ul>
<p v-else>No items</p>



<!-- 在render函數(shù)中渲染 -->
data:{
    items:[{name:"l"},{name:"x"},{name:"c"}]
},
render:function(createElement){
  if(this.items.length){
      return createElement("ul",this.items.map(function(ele){
            return createElement("li",ele.name)
      }))
  }else{
      return createElment("p","No items")  
  }
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論