Vue.js中h函数支持多种参数格式的底层转换逻辑实现-Vue.js-PHP中文网

h函数是createvnode的轻量封装，通过运行时参数判断与归一化实现多参数灵活性：2参数为type+props，3参数含children，4+参数合并children；props和children均经标准化处理。

vue.js中h函数支持多种参数格式的底层转换逻辑实现

Vue.js 的 h 函数本身不执行“底层转换逻辑”，它只是一个轻量级的、约定俗成的创建虚拟 DOM 节点（VNode）的工厂函数。 它的多参数灵活性来源于对参数数量、类型和顺序的**运行时判断与归一化处理**，而非编译期转换或隐式重写。核心在于：Vue 内部通过统一的 createVNode（v3）或 createElementVNode（v3.4+）来承接所有调用，并在其中完成参数标准化。

参数数量与位置决定参数语义

h 是一个高度重载的函数，其行为由传入参数的个数和类型动态推断：

2 个参数：h('div', { id: 'app' }) → 视为 type + props，子节点为空数组
3 个参数：
- h('span', { cls: 'red' }, 'hello') → type + props + children（字符串/数组/VNode）
- h('ul', [h('li', 'a'), h('li', 'b')]) → 若第二个参数是数组且无对象 props，则自动将该数组视为 children，props 设为 null
更多参数（如 4 个）：h('div', {}, 'a', 'b') → 第三个及之后参数被合并为 children 数组（支持多子节点扁平化）