vue中的h函数有什么用？

回答这个问题之前，先撸撸vue的渲染原理吧，一开始我们学习vue的时候，写入内容的格式是：

<template>
    <div>{{msg}}</div>
</template>

<script>
export default{
    data(){
        return {
            msg:'我是一则消息'
        }
    }
}
</script>

没错啊，这个是最简单的写法，设计者为了更利于开发者理解和学习，让编码更像写html一样，格式上直接写html标签，内容呢，采用"{{变量}}"形式输出动态数据，这样的确更简单，降低了开发者学习成本。

其实呢，h函数是createVNode的简称啊，也就是创建虚拟dom的方法，它接受3个参数：

h(‘类型’，‘属性’，‘子级’)

当vue检测到上面的template模板语法时，通过编译程序会转换为：

<script>
export default{
    render(h){
        return h('div',{arrts:{class:'main',id:'main'}},'我是一则消息')
    }
}
</script>

最终vue以render函数接受到的内容和配置为准，创建对应的虚拟dom节点，通过loader打包成模板字符串拼接渲染。

如果有多个子节点，第3个参数可以是数组形式：

<script>
export default{
    render(h){
        return h('div',{arrts:{class:'main',id:'main'}},[h('h2',{arrts:{class:'h2',id:'h2'}},'我是一个标题'),h('span',{arrts:{class:'span',id:'span'}},'我是一个行元素')])
    }
}
</script>

总结： h函数是根据模板写入的内容和属性创建对应的虚拟节点，然后构建真实的dom元素，以此描述视图结构。