前言：

        翻译的官网文档！！！

正文：

h()函数用于创建虚拟DOM节点，虚拟DOM是Vue框架中的核心概念，通过它，可以更高效的更新页面内容。

语法：

function h(type:string|Component,props?:object|null,children?:Children|Slot|Slots):VNode

第一个参数可以是字符串（用于原生元素）或Vue组件

第二个参数是要传递的属性，可以是标签的属性、事件监听器等

第三个参数是子元素，可以是文本、其他虚拟节点或数组

示例：

创建原生元素：（6、7没有追加到页面上）

<template><div id="p_box"></div><div id="p_foo_box"></div><div id="p_bar_box"></div><div id="p_envet"></div><div id="div_bar"></div>
</template>
<script setup lang="ts">
import { h, render, onMounted } from "vue";
onMounted(() => {//1、创建p标签let p = h("p");let p_box = document.getElementById("p_box");render(p, p_box);//2、创建id=foo的p标签let p_id = h("p", { id: "foo" });let p_foo_box = document.getElementById("p_foo_box");render(p_id, p_foo_box);//3、创建class=bar的p标签，标签内容是hellolet p_bar_box = h("p", { class: "bar", innerHTML: "hello" });let p_bar = document.getElementById("p_bar_box");render(p_bar_box, p_bar);//4、children 可以是一个字符串let div_dom = h("div", { id: "bar" }, "hello");let div_bar = document.getElementById("div_bar");render(div_dom, div_bar);//5、创建 button 按钮，点击按钮输出控制台输出123let p_event = h("button",{onClick: () => {console.log(123);},},"提交");let p_event_box = document.getElementById("p_envet");render(p_event, p_event_box);//6、props可以省略，当没有props时h("div", "hello");h("div", [h("span", "helle")]);//7、children数组可以包含混合的vnode和字符串h("div", ["hello", h("span", "hello")]);
});
</script>

 页面效果：

创建组件：

        1、父组件向子组件传递自定义属性，子组件触发自定义事件

        App.vue

<template><div id="box1"></div>
</template>
<script setup lang="ts">
import Welcom from "./components/welcome.vue";
import { h, render, onMounted } from "vue";
onMounted(() => {//传递属性let box1 = document.getElementById("box1");render(h(Welcom, {someProp: "hello",onUpdate: () => {console.log("点击了子组件span元素身上的click事件");},}),box1);
});
</script>

         Welcome.vue

<!-- welcom组件 -->
<template><div class="welcom">恭喜您有时间摸鱼学习!</div><span @click.stop="handlerEvent">{{ someProp }}</span>
</template>
<script setup lang="ts">
defineProps<{someProp: string;
}>();
const emits = defineEmits(["update"]);
function handlerEvent() {emits("update");
}
</script>

         页面效果：

        

         2、传递单个默认插槽

        App.vue组件

<template><div id="box1"></div>
</template>
<script setup lang="ts">
import Welcom from "./components/welcome.vue";
import { h, render, onMounted } from "vue";
onMounted(() => {//传递单个默认插槽let box1 = document.getElementById("box1");render(h(Welcom, () => "传递单个默认插槽"),box1);
});
</script>

         Welcome.vue组件

<!-- welcom组件 -->
<template><div class="welcom">恭喜您有时间摸鱼学习!</div><span><slot></slot></span>
</template>
<script setup lang="ts"></script>

         页面效果：

         3、传递命名插槽时，需要使用 null 以避免插槽对象被当作属性处理。

        App.vue

<template><div id="box1"></div>
</template>
<script setup lang="ts">
import Welcom from "./components/welcome.vue";
import { h, render, onMounted } from "vue";
onMounted(() => {//传递单个默认插槽let box1 = document.getElementById("box1");render(h(Welcom, null, {default: () => "默认插槽展示内容",foo: () => h("div", "foo"),bar: () => [h("span", "one"), h("span", "two")],}),box1);
});
</script>

         Welcome.vue

<!-- welcom组件 -->
<template><div class="welcom">恭喜您有时间摸鱼学习!</div><slot></slot><slot name="foo"></slot><slot name="bar"></slot>
</template>
<script setup lang="ts"></script>

         页面效果：