Vue3 h函数详解：动态渲染与性能优化实战

1. 为什么需要关注Vue3的h函数？

在Vue3项目开发中，当我们需要动态生成复杂DOM结构时，模板语法有时会显得力不从心。这时h函数就派上了大用场。作为Vue3虚拟DOM系统的底层构建块，h函数（全称hyperscript）允许我们以编程方式创建虚拟节点（VNode），这为处理动态渲染逻辑提供了极大的灵活性。

我曾在开发一个可视化配置后台时深有体会：当用户通过拖拽生成表单时，每个表单控件的类型、属性和嵌套关系都是运行时确定的。使用模板+条件渲染的方式会让代码变得臃肿不堪，而h函数配合JSX则完美解决了这个问题。

提示：虽然Vue3推荐使用模板语法作为主要开发方式，但在需要完全控制DOM结构或实现高阶组件时，h函数是不可或缺的工具。

2. h函数的核心用法解析

2.1 基础参数结构

h函数接收三个主要参数：

javascript复制h(
  'div', // 标签名或组件
  { id: 'container', class: 'wrapper' }, // 属性对象
  ['Hello World', h('span', 'inner text')] // 子节点数组
)

第一个参数可以是：

• HTML标签名（如'div'）
• 已注册的组件名
• 直接导入的组件选项对象
• 异步组件或函数式组件

第二个参数是包含props、attrs、class、style等配置的对象。这里有个容易踩的坑：当传递class时，Vue3不再自动合并class（与Vue2不同），需要手动处理类名合并逻辑。

2.2 动态属性处理

在实际项目中，属性经常需要动态计算。我推荐使用以下模式：

javascript复制h('button', {
  class: [
    'btn',
    {
      'btn-primary': isPrimary,
      'btn-disabled': disabled
    }
  ],
  style: {
    backgroundColor: customColor || '',
    fontSize: size + 'px'
  },
  onClick: handleClick
}, buttonText)

注意：事件监听器必须以o