vue之 h() 函数-编程知识

vue之 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', { class: 'desc-value-row' }, [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})),h('div',{ class: 'arco-tag arco-tag-checked speed-tag' },t('components.SubTaskDetail.5q09xhsvcq45', {avgSpeed: dataCheckData.value?.avgSpeed || 0}))])): t('components.SubTaskDetail.5q09prnznzg0'),span: 5}//  "5q09prnzux41": "数据校验：",
//  "5q09xhsvcq44": "数据总量：{totalDataSize}MB，数据总行数：{totalRowCount}行，数据总表数：{totalTableCount}张，已完成表数：{totalTableFinishCount}张",
//  "5q09xhsvcq45": "平均校验速率：{avgSpeed}MB/s"//:deep深度选择器:deep(.desc-value-row) {display: flex;align-items: center;}:deep(.speed-tag) {margin-left: 50px;}

效果：