异常教程
vue3 h函数（超详细）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
前言：为什么需要 h 函数？
在 Vue 的开发过程中，我们常常通过 <template> 标签或 JSX 语法来构建用户界面。但你是否好奇过：Vue 组件最终是如何将这些声明式语法转换为真实的 DOM 元素的？这正是 Vue3 h 函数的核心作用所在。它就像一座桥梁，连接着开发者友好的声明式语法与底层的 DOM 操作。对于希望深入理解 Vue 内部机制的开发者，掌握 h 函数不仅能提升对框架的理解，还能在特定场景（如动态组件生成、性能优化）中发挥重要作用。
什么是 h 函数？
h 函数（h 是 "hyperscript" 的缩写）是 Vue3 中用于创建虚拟节点（VNode）的核心函数。它通过接受组件、元素类型、属性和子元素等参数，最终返回一个描述 DOM 结构的对象。你可以将其想象为一个“元素工厂”：就像用积木搭建模型一样，h 函数根据你的输入参数，逐步组装出所需的虚拟 DOM 结构。
h 函数的基本语法
h 函数的典型调用格式如下：
h(
ComponentOrTag, // 元素类型（如 'div'）或组件对象
propsOrAttrs, // 属性对象或事件处理函数
children // 子元素（可以是字符串或嵌套的 h 函数调用）
)
h 函数的简单用法：构建基础元素
示例 1：创建一个 div 元素
const vnode = h(
'div', // 元素类型
{ class: 'container', style: { color: 'red' } }, // 属性对象
'Hello Vue3!' // 子元素内容
);
这段代码会生成一个带有红色文字的 div 容器，内容为 "Hello Vue3!"。
示例 2：创建带事件的按钮
const vnode = h(
'button',
{
onClick: () => alert('Clicked!'),
class: 'btn'
},
'点击我'
);
这里通过 onClick 属性绑定了点击事件，当按钮被点击时会弹出提示框。
进阶用法：组件与动态属性
使用 h 函数渲染组件
h 函数不仅能创建基础 HTML 元素，还能渲染自定义组件。只需将第一个参数替换为组件对象即可：
// 假设有一个名为 MyComponent 的组件
import MyComponent from './MyComponent.vue';
const vnode = h(
MyComponent,
{
props: { message: '来自父组件的问候' },
onCustomEvent: (payload) => console.log(payload)
},
h('p', '这是 MyComponent 的子组件')
);
动态属性与条件渲染
通过在 props 对象中使用动态表达式，可以实现条件渲染：
const showContent = ref(true);
const vnode = h(
'div',
{
class: { active: showContent.value },
style: { display: showContent.value ? 'block' : 'none' }
},
'动态显示内容'
);
h 函数的“魔法”：虚拟 DOM 的底层逻辑
虚拟节点（VNode）的结构
每个由 h 函数返回的 VNode 对象包含以下核心属性：
type：元素类型（如 'div'）或组件对象props：元素的属性和事件children：子节点列表key：用于身份标识（可选）el：对应的 DOM 元素（仅在 mounted 后存在）
虚拟 DOM 的 Diff 算法
Vue 使用 VNode 树进行 Diff 算法，比较新旧节点的差异后，仅更新发生变化的部分。例如：
// 原始 VNode
const oldVNode = h('div', '初始内容');
// 新 VNode
const newVNode = h('div', '更新后的内容');
// Vue 会智能地仅替换文本内容，而非重新渲染整个元素
常见问题与注意事项
1. 组件名称的大小写问题
当使用 h 函数渲染组件时，必须确保组件名与导出的名称完全一致：
// 正确写法
h(MyComponent) // 组件名首字母大写
// 错误写法（会导致渲染失败）
h(mycomponent)
2. 事件处理函数的 this 上下文
在 h 函数中绑定事件时，函数内部的 this 默认指向全局对象。若需要访问组件实例，建议使用箭头函数或 Vue 的 bind 方法：
// 方式一：使用箭头函数
h('button', {
onClick: () => this.handleClick()
}, '按钮')
// 方式二：在 setup 中绑定
const handleEvent = () => { ... };
h('button', { onClick: handleEvent }, '按钮')
3. 性能优化建议
- 避免在渲染函数中频繁创建新的对象，可复用 props 对象
- 对于大型列表，确保每个节点都有唯一的
key属性 - 使用
Teleport组件时需配合 h 函数的target属性
实战案例：动态生成表单组件
场景描述
假设需要根据后端返回的配置动态生成表单，包含输入框、下拉选择和提交按钮。
实现代码
import { h } from 'vue';
const DynamicForm = ({ fields }) => {
return h('form', { onSubmit: handleSubmit },
fields.map(field => {
switch (field.type) {
case 'input':
return h('input', {
type: 'text',
name: field.name,
placeholder: field.placeholder
});
case 'select':
return h('select', { name: field.name },
field.options.map(opt =>
h('option', { value: opt.value }, opt.label)
)
);
default:
return h('div', '未知组件类型');
}
})
);
};
// 使用示例
const formConfig = [
{ type: 'input', name: 'username', placeholder: '请输入用户名' },
{ type: 'select', name: 'city', options: [...] }
];
const formVNode = h(DynamicForm, { fields: formConfig });
总结：h 函数的价值与适用场景
通过本文的讲解，我们了解到 Vue3 h 函数是连接声明式语法与底层虚拟 DOM 的核心工具。它不仅帮助开发者理解 Vue 的渲染机制，还在以下场景中发挥独特作用：
- 动态生成复杂 UI 结构（如动态表单、图表组件）
- 实现高性能列表渲染（通过 VNode 直接操作）
- 与原生 JavaScript 或其他框架深度集成
对于希望突破 Vue 开发瓶颈的开发者，深入掌握 h 函数将是一把打开 Vue 内核世界的钥匙。尽管在日常开发中我们更多使用模板语法，但理解其底层原理将让你在遇到复杂需求时游刃有余。
延伸思考：h 函数与 JSX 的关系
Vue3 同时支持 h 函数和 JSX 语法，两者本质都是将声明式代码转换为 VNode。选择哪种方式取决于团队习惯：
- h 函数：更贴近 Vue 的底层机制，适合需要直接操作 VNode 的场景
- JSX：语法更简洁直观，但需额外配置 Babel 插件
无论是选择哪种方式，理解它们背后的 h 函数原理，都将帮助你编写出更高效、更灵活的 Vue3 代码。