vue3.0中h函数的简单使用

最近接手了一个多手后台管理项目，项目没什么难点都是表格、表单的什么的。但是他用了Native UI这个组件库（为啥不用element-plus呢？我也不知道），这个组件库我之前没有怎么用过，也没有了解过。最近简单看了一下用法上手之后发现了很多地方都用了h()函数，比如下面这个表格里面加button：

场景没有很复杂，但是突然用h()函数这种写法，多少有点不习惯，这对于我这个Vue老手来说是不能忍受的，系统在学一下h()函数，学完之后，我只能说在有些场景上的使用真香！🤔

一. h函数的介绍

说到h函数，就不得不提，.vue文件怎么编译的啦。过一下：

1.1 编译流程

简化一下编译的流程：

最核心的就这两步：

把一个.vue文件解析成vNode(虚拟dom)
把虚拟dom渲染成真实dom在页面上显示

这里具体怎么处理的就先不说了，不是本章的重点。根据官网的说法，h()是用来创建虚拟dom节点。说明我们可以通过创建的vNode直接去渲染成真实dom。所以我们的关注点是 h函数的产物是什么？h函数如何运行？

1.2 h函数的产物分析

按照官网的案例，我们可以先使用一下：

vue 复制代码

<script setup lang="ts">
import { h } from 'vue'
const testCom = h('div', { id: 'foo' }, '小美老师！')
console.log(testCom)
</script>

看一下这个testCom是什么：

很明显，打印出来的testCom是一个对象，这说明vNode本质是一个对象，里面包含一些固有属性。我们不用特别研究里面的属性，有些属性是Vue用来做diff算法和渲染的时候使用的，我们只要关注这几个属性：

props: // 属性信息* 里面定义类等属性
type: // VNodeTypes VNode 类型
children: // 子节点
component：// 指向VNode对应的组件实例

搞清楚这几个属性之后，我们在写h函数的时候也会更简单一点。

1.3 h函数如何运行

如下代码：

写一个ts文件用来生成vNode:

javascript 复制代码

import { h } from 'vue'
export function componentWithH() {
  return h('div', { id: 'foo', class: 'foo' }, '小美老师！')
}

vue 复制代码

<template>
  <div class="bg">
  </div>
</template>

<script setup lang="ts">
import { componentWithH } from './componentWithTranlate'
</script>

<style>
.foo {
  color: red;
}
</style>

现在通过h函数生成了一个vNode，如何把这个vNode渲染到页面上呢？

类似组件直接引入
通过<component :is="componentWithH" />的方法
通过render函数

前两个没什么好说的，主要是第三种render函数。其实render函数是一种代替template去创建html的另一种方式，配合defineComponent使用，导出组件。

js 复制代码

import { defineComponent, h } from 'vue'
export default defineComponent({
  render() {
    return  h('div', { id: 'foo', class: 'foo' }, '小美老师！')
  }
})

二. h函数的使用

下面来简单介绍h函数的使用。

2.1 基本使用

typescript 复制代码

// 完整参数签名
function h(
  type: string | Component,
  props?: object | null,
  children?: Children | Slot | Slots
): VNode

// 省略 props
function h(type: string | Component, children?: Children | Slot): VNode
type Children = string | number | boolean | VNode | null | Children[]
type Slot = () => Children
type Slots = { [name: string]: Slot }

很简单，接受三个参数，

第一个type可以是标签字符串、也可以是通用组件。

props：一些属性，比如样式，class，事件等。。

children：可以是字符串，也可以是数组。

如下，我们定义一个div，包含样式和click事件，一个子元素

php 复制代码

const _h = h(
	'div',
	{
		class: 'test',
		onClick: () => {},   // 事件监听器应以 onXxx 的形式书写
	},
	[
		h('span', {}, '测试')
	]
)

2.2 配合组件

和基本元素的使用其实没什么区别，但是要注意一下，需要单文件引入。

javascript 复制代码

import { ElButton } from 'element-plus'  // 要单独引入一下
import { defineComponent, h } from 'vue'

export default defineComponent({
  render() {
    return h(ElButton, { id: 'foo', class: 'foo' }, '小美老师！')
  }
})

简单的介绍了一下h函数的运行流程和使用，有什么问题欢迎大家在评论区指出！