当前位置: 首页 > news >正文

【Vue3】 h()函数的用法

目录

介绍

参数

使用案例

1.创建虚拟 DOM 元素

2. 组件的动态渲染

3. 创建功能组件

4.渲染动态属性

5. 使用插槽

6. 创建动态标签


介绍

h() 函数用于辅助创建虚拟 DOM 节点,它是 hypescript 的简称——能生成 HTML (超文本标记语言) 的 JavaScript,它有另外一个名称,叫做 createVnode()。在 Vue 项目中使用 HTML 标签构建页面时,最终结果会转化为 vnode,而该h()函数直接创建 vnode,可以更灵活地构建组件渲染逻辑,并提高性能。

参数

  • type:要创建的节点类型,可以是 HTML 标签、组件或函数(功能组件)。
  • props(可选):包含节点属性的对象,作为 prop 传递。
  • children(可选):子节点可以是字符串、数组或其他 vnode 对象。

1. type:  HTML标签名:如果有type字符串,则会被解析为HTML标签。
                Component:如果type是对象或者函数,则会被解析为Vue组件。
                异步组件:type也可以是一个返回Promise的函数,该Promise将被解析到组件。
2. props:Props 是可选参数,用于指定节点的属性。
                传递 props 时,传递一个包含属性名称和值的对象作为 prop。
                您也可以将null其作为 props 的值传递。
3. children:子节点可以是字符串,数组或其他 vnode 对象。
                     如果子节点是一个数组,则数组中的每个元素都将被视为节点的子节点。
                     如果子节点是一个函数,它将在渲染期间被调用,并且其返回值将作为子节点。

注意事项:

  • 如果没有props,那么通常可以将children作为第二个参数传入;
  • 如果会产生歧义,可以将null作为第二个参数传入,将children作为第三个参数传

官方完整类型参数

// 完整参数签名
function h(type: string | Component,props?: object | null,children?: Children | Slot | Slots
): VNode// 省略 props
function h(type: string | Component, children?: Children | Slot): VNodetype Children = string | number | boolean | VNode | null | Children[]type Slot = () => Childrentype Slots = { [name: string]: Slot }


使用案例

1.创建虚拟 DOM 元素

h函数可以在两个地方使用:

  • render函数选项中;
  • setup函数选项中(setup本身需要是一个函数类型,函数再返回h函数创建的VNode);
import { h } from 'vue'export default {render() {return h('div', { className: 'app' }, [h('h2', { className: 'title' }, 'I am title'),h('p', null, 'I am content')])}
}
// 或者
import { defineComponent } from "vue";
export default defineComponent({name: "Jsx",render() {return I am div;},
});

定义一个setup返回渲染函数的函数。

import { h } from "vue"export default {setup() {// setup is a function that returns another functionreturn () => h("div", { class: "app" }, [h("h2", { class: "title" }, "I am title"),h("p", null, "I am content")])}
}

2. 组件的动态渲染

import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';const nowComponent = ref('ComponentA');function changeComponent() {nowComponent.value = nowComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA';
}const createComponent = () => {return h(nowComponent.value === 'ComponentA' ? ComponentA : ComponentB);
};

3. 创建功能组件

import { h, defineEmits } from 'vue';const FunctionalComponent = (props, context) => {return h('div', null, [h('p', null, props.text),h('button', { onClick: context.emit.bind(context, 'click') }, 'click')]);
};const emit = defineEmits(['click']);function handleClick() {console.log('handleClick');
}

如上所示,这是一个典型的函数式组件使用方法,包括如何在父子组件中与它们交互。FunctionalComponent 接收 props 和 context 参数,并使用 h() 函数构造页面。此外,它还通过触发父组件中的事件处理程序context.emit。

4.渲染动态属性

  import { ref } from 'vue';const visible = ref(true);function myVisibility() {visible.value = !visible.value;}const componentWithProps = () => {return h('div', { class: { visible: visible.value } }, 'div');};

如上所示,里面的函数根据 h()的值判断 vnode 是否带有class ,并在点击按钮时实现动态样式。当然,动态 class 只是一个例子,实际上里面的各种属性或者子组件都可以动态灵活

5. 使用插槽

import { h } from 'vue';const SlotComponent = (props, context) => {return h('div', null, [h('p', null, 'In slot:'),context.slots.default && context.slots.default()]);
};

如上所示,在引用SlotComponent组件时,其内部标签内的内容将作为默认插槽的内容传递给SlotComponent。此外,还可以使用context.slots.default()来获取并渲染默认插槽的内容。因此,当我们封装一个函数式组件,但内部有动态部分时,特别适合以这种方式使用插槽。

6. 创建动态标签

import { ref } from 'vue';const tag = ref('div');function changeTag() {tag.value = tag.value === 'div' ? 'section' : 'div';
}const createElement = () => {return h(tag.value, null, 'dynamic');
};

这种方式避免了使用v-if产生大量冗余代码。

相关文章:

【Vue3】 h()函数的用法

目录 介绍 参数 使用案例 1.创建虚拟 DOM 元素 2. 组件的动态渲染 3. 创建功能组件 4.渲染动态属性 5. 使用插槽 6. 创建动态标签 介绍 h() 函数用于辅助创建虚拟 DOM 节点,它是 hypescript 的简称——能生成 HTML (超文本标记语言) 的 JavaScript&#x…...

Flask如何实现前后端分离项目

在现代Web开发中,前后端分离是一种常见的架构模式,其中前端和后端分别独立开发和部署,通过API进行通信。Flask作为后端框架,可以很容易地与前端框架(如React、Vue.js或Angular)配合使用来实现前后端分离。以…...

二维码生成器 1.02.41| 一站式QR码生成器和美化工具

二维码生成器是一个有用的QR码生成器应用程序。可以轻松地为网站链接、文本、WiFi、名片、短信、社交媒体账户等生成QR码。该应用支持更改QR码的颜色、码眼图案和框架,并可以添加徽标和文本,使QR码更加美观。使用此QR码生成器,可以使用设计精…...

腾讯云视立方·直播 SDK 合规使用指南

为帮助使用直播 SDK 的开发运营者(以下简称“您”)在符合个人信息保护相关法律法规、政策及标准的规定下合规接入、使用第三方SDK,深圳市腾讯计算机系统有限公司(以下简称"我们")特制定《直播 SDK 接入使用说…...

在 Spring 中使用 @EhCache 注解作为缓存

文章目录 项目概况项目设置一个简单的 RESTful Web 服务Spring 整合 EhCache第 1 步:更新依赖项以使用 EhCache Spring 注解第 2 步:设置自定义缓存管理器第 3 步:配置 EhCache第 4 步:测试缓存 刷新缓存总结推荐阅读文章 EhCache…...

npm install进度卡在 idealTree:node_global: sill idealTree buildDeps

ping一下源:ping http://registry.npm.taobao.org/ ping不通,原因:原淘宝npm永久停止服务,已更新新域名~~震惊!!! 重新安装:npm config set registry https://registry.npmmirror.c…...

力扣1031. 两个非重叠子数组的最大和

力扣1031. 两个非重叠子数组的最大和 题目解析及思路 题目要求找到两段长分别为firstLen 和 secondLen的子数组,使两段元素和最大 图解见灵神 枚举第二段区间的右端点,在左边剩余部分中找出元素和最大的第一段区间,并用前缀和优化求子数组…...

【Unity实战篇】 接入百度翻译,实现文本自动翻译功能

前言【Unity实战篇】 接入百度自动翻译,实现文本自动翻译功能一、获取百度翻译开发平台的APPID和密钥二、Unity中接入自动翻译功能三、Unity中实现自动翻译文本Text功能总结前言 日常在做项目的过程中,游戏本地化几乎已经成为必不可少的一步。本篇文章将演示怎样在Unity中接入…...

ubuntu samba

参考: 基于Ubuntu22.04的Samba服务器搭建教程(新手保姆级教程)_ubuntu samba-CSDN博客 当时按照这个不行: 主要做了这些修改 1、ufw 打开端口 这些都打开了 Samba服务使用的端口和协议如下1234: Port 137 (UDP) - NetBIOS 名…...

Linux系统和数据库常用的命令2

Linux系统和数据库常用的命令2 1、两台Linux机器ssh免密登录 client端登录server端需要免密,只需把公钥发送到server就可,会在server端生成一个authorized_keys文件 # 108机器上[rootclient ~]# ssh-keygen -t rsa // 非对称算法 Generating public/…...

Golang | Leetcode Golang题解之第468题验证IP地址

题目: 题解: func validIPAddress(queryIP string) string {if sp : strings.Split(queryIP, "."); len(sp) 4 {for _, s : range sp {if len(s) > 1 && s[0] 0 {return "Neither"}if v, err : strconv.Atoi(s); err …...

mermaid 图表相关

1.mermaid图表的代码 1.1 flowchart 流程图代码 flowchart TDA[Christmas] -->|Get money| B(Go shopping)B --> C{Let me think}C -->|One| D[Laptop]C -->|Two| E[iPhone]C -->|Three| F[fa:fa-car Car]1.2 sequece 时序图代码 sequenceDiagramAlice->&…...

Unity接入人工智能

在Unity接入人工智能中,本篇实现了接入百度智能云ai进行npc智能对话,通过http方式,并非插件,适合于所有支持Http链接的Unity版本。对于Chartgpt可以参考本篇内容的实现过程。 1-4节讲解测试,第5节讲解Unity中的实现&a…...

C语言笔记 14

函数原型 函数的先后关系 我们把自己定义的函数isPrime()写在main函数上面 是因为C的编译器自上而下顺序分析你的代码,在看到isPrime的时候,它需要知道isPrime()的样子——也就是isPrime()要几个参数,每个参数的类型如何,返回什么…...

Cpp::STL—list类的模拟实现(上)(13)

文章目录 前言一、结点类的实现二、迭代器类的实现迭代器类的存在意义迭代器类的模板参数构造函数运算符的重载--运算符的重载、!运算符的重载*运算符的重载->运算符的重载 总结 前言 注意本篇难度偏高,其主要体现在迭代器类的实现!   什么&#xf…...

ListView的Items绑定和comboBox和CheckBox组合使用实现复选框的功能

为 ListView 控件的内容指定视图模式的方法,参考官方文档。 ComboBox 样式和模板 案例说明:通过checkBox和ComboBox的组合方式实现下拉窗口的多选方式,同时说明了ListView中Items项目的两种绑定方式. 示例: 设计样式 Xaml代码…...

PetaLinux工程的常用命令——petalinux-build

petalinux-build&#xff1a;编译项目或指定组件。 注&#xff1a;有些命令我没用过&#xff0c;瞎翻译有可能会翻译错了。 用法: petalinux-build [options] 可选参数: -h, --help 显示函数用法。 -p, --project <PROJECT> PetaLinuxSDK项目的路径。默认…...

【Qt】窗口预览(1)—— 菜单栏

窗口预览&#xff08;1&#xff09; 1. QMainWindow2. QMenuBar——菜单栏2.1 创建菜单栏/将菜单栏添加到widget中2.2 addMenu——在菜单栏中添加菜单2.3 在菜单中添加选项2.4 添加快捷键2.5 支持嵌套添加菜单2.6 添加信号2.7 添加分割线 1. QMainWindow Qt窗口是通过QMainWin…...

揭秘酱香型白酒中的6大劣质酒的特点,守好你的健康与钱包

你知道吗&#xff1f;居然有 90%的人都喝过这 6 种劣质酱香型白酒&#xff0c;今天酱酒亮哥就带大家一起揭开它们的真面目&#xff0c;看看你中招了没有&#xff01; 先说那种有很浓的生粮味的酱酒&#xff0c;就像刚磨出来还没烧开的豆浆味&#xff0c;喝起来那叫一个难受。想…...

C#拓展方法

定义 扩展方法使你能够向现有类型“添加”方法&#xff0c;而无需创建新的派生类型、重新编译或以其他方式修改原始类型。 扩展方法是一种静态方法&#xff0c;但可以像扩展类型上的实例方法一样进行调用。 对于用 C#、F# 和 Visual Basic 编写的客户端代码&#xff0c;调用扩…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...