vue中的h函数

虚拟DOM是一个简单的javascript对象，包含tag，props，children三个属性

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

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

该对象就是所谓的虚拟dom，因为dom对象是属性结构，所以使用JavaScript对象就可以简单表示。而原生dom有许多属性、事件，即使创建一个空div也要付出昂贵的代价。而虚拟dom提升性能的点在于DOM发生变化的时候，通过diff算法对比，计算出需要更改的DOM，只对变化的DOM进行操作，而不是更新整个视图。。。

h函数就是vue中的createElement方法，这个函数作用就是创建虚拟dom，追踪dom变化的。。。

<!-- 在模板中渲染 -->
<ul v-if="items.length">
      <li v-for="item in items">{{item.name}}</li>
</ul>
<p v-else>No items</p>
 
 
 
<!-- 在render函数中渲染 -->
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")  
  }
}