h()函数

前言

Vue推荐在绝大数情况下使用模板来创建HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的能力，这个时候你可以使用渲染函数 ，它比模板更接近编译器；

h()函数的来源

Vue在生成真实的DOM之前，首先会将节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚拟DOM（VDOM）,最后VDOM才渲染成真实的DOM；

如果我们直接编写生成vnode的代码，效率会更高，这里我们就是h()函数。h函数我们也可以称为createVnode函数，是用于创建 vnode 的一个函数；

h()函数的使用

h函数接收三个参数。例：()=>h（'h1',{class="classsNmae"}, '大家好！'）
第一个: 可以为一个html标签，一个组件，一个异步组件，或者是一个函数式组件。
第二个：{ Object } Props，与attributes和props,以及事件对应的对象，我们可以在模板中使用，如果没有需要传入的属性，可以设置为null。
第三个：{String | Object |Array}可以是字符串Text文本或者是h函数构建的对象再者可以是有插槽的对象。

代码例子：

    {
          label: t('components.SubTaskDetail.5q09prnzux41'),
          value: dataCheckDetail
            ? h('div', null, [
                h(
                  'div',
                  null,
                  t('components.SubTaskDetail.5q09xhsvcq44', {
                    totalDataSize: dataCheckData.value?.total || 0,
                    totalRowCount: dataCheckData.value?.totalRows || 0,
                    totalTableCount: dataCheckData.value?.tableCount || 0,
                    totalTableFinishCount:
                      dataCheckData.value?.completeCount || 0
                  })
                )
              ])
            : t('components.SubTaskDetail.5q09prnznzg0'),
          span: 5
        }

//  "5q09tn4uzy41": "累计反向迁移对象数：",
//  "5q09xhsvcq44": "数据总量：{totalDataSize}MB，数据总行数：{totalRowCount}行，数据总表数：{totalTableCount}张，已完成表数：{totalTableFinishCount}张",

效果： 

数据总量：0MB，数据总行数：104行，数据总表数：1张，已完成表数：1张