快捷導(dǎo)航

vue中的h函數(shù)使用及說明

更新時間：2025年12月13日 14:35:57 作者：@紅@旗下的小兵

這篇文章主要介紹了Vue中h函數(shù)的使用和虛擬DOM的概念,h函數(shù)是Vue中的createElement方法,用于創(chuàng)建虛擬DOM,虛擬DOM是一個普通的JavaScript對象,包含tag,props,children三個屬性,通過diff算法,可以追蹤DOM的變化,只對變化的DOM進行操作,從而提升性能

vue中的h函數(shù)

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

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

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

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

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

這個render方法也可以寫成這樣：

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

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

在看一個例子：寫一個main.jsx文件

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

使用bable編譯之后：

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

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

我們在看下官方文檔所說的createElement函數(shù)，它返回的實際上不是一個DOM元素，更準確的名字是：createNodeDescription（直譯為——創(chuàng)建節(jié)點描述），因為它所包含的信息會告訴vue頁面上需要渲染什么樣的節(jié)點，包括其子節(jié)點的描述信息。

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

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

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

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

來一個小例子：

<!-- 在模板中渲染 -->
<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ù)中寫的時候，內(nèi)容寫在參數(shù)三——數(shù)組的第一個參數(shù)中。（建議大家動手寫一寫，理解的會更透徹。）

在來一個官方文檔例子：

<!-- 在模板中渲染 -->
<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")  
  }
}