h() 创建虚拟节点

最后更新：2026-10-22

h() 创建虚拟节点（VNode）：render 函数与 JSX 的底层 API，也用于动态生成结构。

📝 语法

h("div", { class: "box" }, "内容")
h(MyComp, { msg: "hi" }, { default: () => "插槽内容" })

type, props?, children?	类型（标签名或组件）+ 可选 props 对象 + 子节点（字符串/数组/插槽对象）

返回值：VNode（虚拟节点）

修改下面的代码，在预览区实时查看效果：

输出：

渲染出三项列表。

ℹ️ 说明 模板编译后就是 h() 调用：理解它有助于读懂编译产物与 JSX。

💡 提示 需要完全程序化结构时才手写 h()；常规页面用模板更易维护。

⚠️ 注意 第一参数大小写敏感：h('div') 是原生标签，h('Div') 会被当组件解析。

更多案例即将上线。

Q h 和 JSX 哪个好？

A JSX 更接近 HTML 且可读性好，需构建支持；h 无需构建，适合少量动态结构。

Q 怎么传插槽？

A 第三个参数用对象：{ default: () => [...], header: () => [...] }。

Q 必须 import 吗？

A 构建项目里从 vue 引入；CDN 环境用 Vue.h。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。