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函数的运行流程和使用,有什么问题欢迎大家在评论区指出!

相关推荐
契机再现1 分钟前
babel与AST
javascript·webpack·typescript
渊兮兮1 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
鑫宝Code1 分钟前
【TS】TypeScript中的接口(Interface):对象类型的强大工具
前端·javascript·typescript
和你一起去月球2 分钟前
TypeScript - 函数(下)
javascript·git·typescript
_Legend_King8 分钟前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
爱吃青椒不爱吃西红柿‍️9 分钟前
华为ASP与CSP是什么?
服务器·前端·数据库
余生H10 分钟前
transformer.js(三):底层架构及性能优化指南
javascript·深度学习·架构·transformer
一棵开花的树,枝芽无限靠近你12 分钟前
【PPTist】添加PPT模版
前端·学习·编辑器·html
陈王卜15 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
景天科技苑23 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具