vue之 h() 函数

news2024/11/18 13:25:40

前言

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;
  }

效果：