vue中的h函数使用及说明

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

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

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

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

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

function h(tag,props,...children){//h函数，返回一个虚拟dom对象
    return {
        tag,
        props:props || {},
        children:children.flat()//扁平化数组，降至一维数组
    }
}

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


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

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