vue 3 setup javascript 语法下 h 函数的使用

在 Vue 3 的 setup 语法糖中，h 函数（即 createVNode 的简写）用于以函数式编程方式创建虚拟 DOM 节点。以下是其详细使用方法及注意事项：

基础用法

导入与基本调用需先从 vue 中导入 h 函数：

<script>
import { h } from "vue";

// 使用时通过 h(标签名, 属性对象, 子元素) 创建元素：
const node = h("div", { class: "container" }, "Hello World");
</script>

参数说明：

• 标签名：
  • 支持原生 HTML 标签（如： 'div'）
  • 组件名（如： MyComponent）
  • JSX 样式（如： {attrs: {}}）。
• 属性对象：包含元素的属性（如：class、style）、事件监听器（如：onClick）等。
• 子元素：可以是字符串、其他 VNode 或数组（嵌套结构）。

响应式数据的处理

结合 ref/reactive 通过响应式数据驱动 h 函数生成的 DOM 更新：

<script>
import { h, ref } from "vue";

const count = ref(0);
const message = h("p", null, `Count: ${count.value}`);
</script>

动态属性绑定

使用对象解构或计算属性传递动态值：

<script>
import { h, ref } from "vue";

const dynamicClass = ref("active");
const element = h("div", { class: dynamicClass.value }, "Click me");
</script>

高级用法

条件渲染与循环

通过条件表达式或 map 方法生成动态节点：

<script>
import { h, reactive } from "vue";

const items = reactive(["A", "B", "C"]);
const list = h(
  "ul",
  null,
  items.map((item) => h("li", item))
);
</script>

组件嵌套

直接传递子组件作为子元素：

<script>
import { h } from "vue";
import ChildComponent from "./ChildComponent.vue";

const parentVNode = h("div", null, [
  h(ChildComponent, { prop: "value" }),
  h("button", { onClick: handleClick }, "Click"),
]);
</script>

示例 1：使用 h 函数创建按钮

<script setup>
import { h, ref } from "vue";

const count = ref(0);
const increment = () => count.value++;

// 使用 h 函数创建按钮
const button = h(
  "button",
  {
    onClick: increment,
    style: { backgroundColor: count.value > 5 ? "red" : "blue" },
  },
  `Click Count: ${count.value}`
);

// 将生成的 VNode 暴露给模板
defineExpose({ button });
</script>

<template>
  <div>
    <!-- 通过插槽或 v-html 渲染生成的 VNode -->
    <component :is="button" />
  </div>
</template>

示例 2：使用 h 函数动态渲染组件

<script setup>
import { h } from "vue";
import ChildComponent from "./ChildComponent.vue";

const dynamicComponent = () =>
  h(ChildComponent, {
    // 传递 props
    title: "动态标题",
    // 传递事件
    onCustomEvent: (value) => console.log(" 事件触发:", value),
  });
</script>

<template>
  <component :is="dynamicComponent" />
</template>

示例 3：传递复杂 Props 和插槽

<script setup>
import { h } from "vue";
import ChildComponent from "./ChildComponent.vue";

const dynamicComponent = () =>
  h(ChildComponent, {
    // 传递对象类型的 props
    config: { id: 1, name: "示例" },
    // 传递插槽内容
    slots: {
      default: () => h("div", "默认插槽内容"),
      header: () => h("h2", "标题插槽"),
    },
  });
</script>

示例 4：结合 defineProps 和 defineEmits

<script setup>
import { h, defineProps } from "vue";
import ChildComponent from "./ChildComponent.vue";

const props = defineProps({
  componentName: String,
});

const emit = defineEmits(["custom-event"]);

const renderComponent = () =>
  h(ChildComponent, {
    title: props.componentName,
    onCustomEvent: (value) => emit("custom-event", value),
  });
</script>

<template>
  <component :is="renderComponent" />
</template>

通过以上方法，h 函数在 script setup 中提供了灵活的虚拟 DOM 操作能力，尤其适合需要深度定制渲染逻辑的场景。更多细节可参考官方文档或相关技术博客。