26 Vue3之（函数式编程，h函数）

vue编写风格有三种

1. template 模板书写风格

2. tsx编写风格

3. 函数式组件 h函数//h函数的源码 createVnode

h函数

这个东西在Vue3使用的很少了，因为vue3针对template方式做了静态标记极大的优化了性能 大家有个了解就可以了，之前为什么会有这个，应为Vue单文件组件编译是需要过程，他会经过parser ->ast ->transform>js api -> generate -> render 而h函数直接跳过这几个阶段直接到render阶段，所以性能上有很大的帮助。

主要会用到h函数

h 接收三个参数

• type 元素的类型
• propsOrChildren 数据对象, 这里主要表示(props, attrs, dom props, class 和 style)
• children 子节点

h函数拥有多种组合方式

// 除类型之外的所有参数都是可选的
h('div')
h('div', { id: 'foo' })
 
//属性和属性都可以在道具中使用
//Vue会自动选择正确的分配方式
h('div', { class: 'bar', innerHTML