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

相关推荐
还是大剑师兰特35 分钟前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解36 分钟前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~42 分钟前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
man20171 小时前
【2024最新】基于springboot+vue的闲一品交易平台lw+ppt
vue.js·spring boot·后端
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django