在 vue3 项目中，当我们需要突破模板限制构建高度动态的 UI 时，h 函数（Hyperscript）就是那把打开底层渲染能力的钥匙。相较于模板语法，它提供了更接近 JavaScript 原生的灵活性和控制力。

h 函数：你的代码即模板

想象一下，你不再需要预写 <template> 标签，而是直接在 JavaScript/TypeScript 中声明式地构建虚拟 dom 节点。这就是 h 函数的核心作用：

import { h } from 'vue';

// 创建一个简单的 div 元素，包含类名和子文本
const vnode = h('div', { class: 'message' }, 'Hello, Vue3 h函数!');

何时选择 h 函数？模板 vs 渲染函数

• 模板优势：直观、易读，适合绝大多数静态或中度动态内容。

• h 函数优势：

• 极致动态性：组件结构或类型需根据运行时数据动态生成时（如动态渲染任意传入的组件类型）。

• 高级抽象：构建高度可复用的渲染逻辑或通用组件库底层。

• JS 全能力：无缝利用 JavaScript 的全部特性（循环、条件、函数组合等）构建 UI。

• 类型推导 (TS)：配合 TypeScript 获得更佳的类型安全与智能提示。

实战场景：动态图标组件渲染器

假设我们需要一个组件，它能根据传入的图标名 (iconName) 渲染对应的 SVG 图标组件，同时统一处理所有图标的样式和基础逻辑。使用 h 函数可以极其简洁地实现：

// DynamicIconRenderer.vue
import { defineComponent, h } from 'vue';
import * as IconComponents from './icons'; // 导入所有图标组件

export default defineComponent({
  props: {
    iconName: {
      type: String,
      required: true,
      validator: (name) => Object.keys(IconComponents).includes(name),
    },
    size: {
      type: String,
      default: '1em',
    },
  },
  setup(props) {
    return () => {
      // 1. 根据 iconName 动态获取对应的组件定义
      const TargetIcon = IconComponents[props.iconName];
      
      // 2. 使用 h 函数渲染该组件，并动态绑定 props 和样式
      return h(TargetIcon, {
        style: { fontSize: props.size, color: 'currentColor' },
        'aria-hidden': true,
      });
    };
  },
});

关键优势在此体现：

1. 动态组件类型：h(TargetIcon, ...) 中的 TargetIcon 是在运行时根据 props.iconName 解析出来的组件对象。模板中虽然可以用 <component :is="...">，但 h 函数在组合复杂逻辑时更直接。

2. 高效与灵活：整个渲染逻辑在一个函数内完成，没有额外的模板解析开销，易于组合其他 JS 逻辑。

3. 完美支持 TypeScript：对 IconComponents 和 TargetIcon 的类型定义能提供强大的编码提示和校验。

h 函数进阶技巧

• 处理插槽：使用 h 函数的第三个参数（children）传递插槽内容。可以是字符串、数组（多个子节点）、或其他 vnode。

  h(MyComponent, null, {
      default: () => [h('span', '默认插槽内容')],
      header: () => h('h1', '标题插槽')
  })

• 渲染 Fragment：使用 h(Fragment, ...) 或简写为 [vnode1, vnode2] 返回多个根节点。

• 性能优化：在 setup 中返回渲染函数能利用 Vue 的响应式追踪优化，避免不必要的重新渲染。

总结：掌握h函数，解锁 Vue3 高阶开发

Vue3 的 h 函数并非要取代模板，而是为开发者提供了一把应对高度动态渲染需求的利器。当你需要：

• 构建高度灵活、基于运行时数据的 UI 结构

• 开发底层通用组件库

• 追求极致渲染性能控制

• 在 TypeScript 中获得最佳开发体验

深入理解并运用 h 函数将极大提升你的 Vue 开发能力。它代表了从“模板使用者”到“渲染机制掌控者”的关键跃迁，助你在复杂场景下构建更优雅高效的解决方案。

本文深入探讨了 Vue3 中 h 函数的核心价值与实战应用场景，特别强调其在动态组件渲染、复杂逻辑抽象及TypeScript支持方面的独特优势。通过动态图标组件的案例，展示了如何用渲染函数替代模板实现更灵活的组件设计，并分享了处理插槽、Fragment等进阶技巧。文中提供的代码示例可直接应用于实际项目，帮助开发者高效解决动态UI生成问题。

链接: https://fly63.com/article/detial/12744