解析vue中的h函数

说明

在使用VUE框架去写前端时，我们是把html的代码写在template标签中，但无论是在打包还是在浏览器呈现网页时，都会对vue文件进行解析处理。

首先会对模板文件的html的每一个节点转换成VNode，然后多个VNode结合成虚拟Dom树(VDom)，最后再将VDom转成真实的Dom结构。

因此在渲染页面的过程中，模板文件的转义也是花费了一部分的时间。

如果我们在编写代码时，不写成模板形式，而是直接编写VNode的代码，就会省去一部分的时间。

VNode的代码就是使用h函数进行编写的。

h函数结构

h函数有三个参数：

• 第一个参数，可以设置为html标签，一个组件，一个函数式组件
• 第二个参数，是标签或者组件的属性，事件对象等，如果没有传入的属性，可以设置为null
• 第三个参数，可以是字符串，或者是插槽，就相当于

  b

  中的b内容。

例子

1，

<el-button type="text" @click="open">点击打开 Message Box</el-button>

可以写成：

h('el-button',{ type: 'text', @click : "open" },'点击打开')

2，

<p>123</p>

可以写成：

h('p',null,'123')

3，

<p>
<el-date-picker v-model="value1" type='date' placeholder='选择日期'>
</el-date-picker>
</p>

可以写成：

h('p', null, [
  h('el-date-picker'，vModel:"value1",type:"date",placeholder:"选择日期"})
 ])