Vue Academy · 课时

深入理解 h() 函数

Q: 「深入理解 h() 函数」这节课中我会学到什么？

h(type, props, children) 签名、VNode 结构，以及渲染动态组件类型 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

h(type, props, children) 签名、VNode 结构，以及渲染动态组件类型

深入理解 h() 函数 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

什么是 h 函数

h 函数是 hyperscript 的缩写，它可以直接在 JavaScript 中创建虚拟 DOM 节点（VNode）。它是模板编译结果的基础。渲染函数会返回调用 h 的结果。

函数签名

h 接受三个参数：h(type, props, children)。类型可以是标签名称字符串、组件对象或函数式组件。属性是一个包含属性、组件属性和事件的对象。子节点可以是文本、VNode 数组或插槽对象。

import { h } from "vue";

h(type, props, children);

简单元素

传入标签名称以及包含 class 的属性对象，就可以生成带样式的元素。这里的第三个参数是普通文本内容。

import { h } from "vue";

h("div", { class: "foo" }, "text");
// renders: <div class="foo">text</div>

属性与特性

所有内容都放在同一个属性对象中：HTML 特性、DOM 属性、class、style 和事件监听器。Vue 会在更新时判断每一项应归属何处。

h("input", {
  type: "text",
  value: "hello",
  class: "field",
  placeholder: "Type here"
});

子节点数组

当一个元素包含多个子节点时，请将 VNode 数组作为第三个参数传入。每个子节点本身都是一次对 h 的调用。

h("ul", null, [
  h("li", null, "item")
]);
// renders: <ul><li>item</li></ul>

无属性时传入 null

如果元素没有属性，您可以将 null（或空对象）作为第二个参数传入，这样子节点就会保留在第三个位置。

h("ul", null, [
  h("li", null, "first"),
  h("li", null, "second")
]);

渲染组件

类型参数可以是导入的组件。您传入的属性会成为该组件的属性。

import { h } from "vue";
import MyComponent from "./MyComponent.vue";

h(MyComponent, { title: "Hello" });

以对象形式传入插槽

要向组件传入插槽内容，子节点参数需要改为由函数组成的对象。每个键都是插槽名称，每个值都是一个返回虚拟节点或文本的函数。

h(MyComponent, { title: "Hello" }, {
  default: () => "slot content"
});

具名插槽与作用域插槽

多个插槽就是多个键。作用域插槽会将其属性作为函数参数接收。

h(MyComponent, null, {
  header: () => h("h1", null, "Title"),
  default: (props) => h("p", null, props.text)
});

事件监听器

事件是以 on 开头、后接 PascalCase 事件名称的属性。点击监听器就是 onClick 属性。

h("button", {
  onClick: () => console.log("clicked")
}, "Press me");

从渲染函数返回 h

在 setup 中，您可以返回渲染函数，而不是使用模板。每次重新渲染时都会调用它，以生成虚拟节点树。

import { h, ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    return () => h("button", {
      onClick: () => count.value++
    }, "Count: " + count.value);
  }
};

快速检查

如何使用 h 向组件传入默认插槽内容？

回顾

h 函数通过 h(type, props, children) 构建虚拟节点。类型可以是标签或组件，属性保存特性和 onEvent 监听器，子节点可以是文本、虚拟节点数组，或由函数组成的插槽对象。渲染函数会返回 h 调用，并在每次重新渲染时运行。

常见问题解答

「深入理解 h() 函数」课时是免费的吗？

是的 — 「深入理解 h() 函数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「深入理解 h() 函数」这节课中我会学到什么？

h(type, props, children) 签名、VNode 结构，以及渲染动态组件类型你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「深入理解 h() 函数」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy