最近接手了一个多手
后台管理项目,项目没什么难点都是表格、表单的什么的。但是他用了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函数的运行流程和使用
,有什么问题欢迎大家在评论区指出!