Vue.jsh函数属性处理详解

Vue.js 的 h 函数远不止是简单的 VNode 创建工具，它在生成虚拟节点前会执行一套精密的属性归一化流程：自动区分 props 与 attrs、深度合并 class/style 并统一格式、标准化事件监听器（智能解析 onXxx 命名与修饰符）、优先拦截 ref/key/modelValue 等语义化特殊属性——这一系列隐式但关键的处理，深刻影响着组件通信、样式继承、事件绑定乃至 v-model 行为，理解它，才能真正掌握 Vue 渲染系统的底层逻辑与可控性。

Vue.js 中 h 函数生成 VNode 时，并不会直接把传入的属性原样塞进 VNode 对象，而是经过一套明确的属性归一化（normalization）与规范化（normalization + normalization-aware handling）流程。这个过程决定了 props、attrs、事件、class、style 等如何被识别、合并、过滤和挂载，直接影响组件行为与渲染结果。

props 与 attrs 的自动分离

当调用 h(Component, { onClick: handler, id: 'foo', disabled: true }) 时，Vue 会依据组件的 props 定义（或运行时推导）判断哪些属性属于显式声明的 prop，其余则归入 attrs：

• 若组件定义了 props: ['id', 'disabled']，则 id 和 disabled 进入 props 字段，onClick 被识别为事件监听器，进入 props.on 或 props.onClick（取决于 Vue 版本与写法）
• 若组件未声明 id，但传入了 id，它将落入 attrs.id，并默认透传到根元素（除非禁用 inheritAttrs: false）
• 原生 DOM 事件（如 onClick、onInput）会被自动转为小写 onclick 并作为原生监听器绑定；而自定义事件（如 onUpdate:modelValue）保留 PascalCase 形式，供 emit 触发

class 与 style 的深度合并策略

class 和 style 是特殊处理的属性，支持多种格式输入并自动归一化为统一结构：

• class 支持字符串、对象、数组混合：h('div', { class: ['a', { b: true }, 'c'] }) → 归一化为 "a b c"；组件内部的 class 也会与父级传入的合并（非覆盖）
• style 支持对象（{ color: 'red', fontSize: '14px' }）或字符串（"color:red;font-size:14px;"），最终统一转为驼峰键的对象，并与组件自身 style 合并；CSS 变量、重要性（!important）等会被保留但需手动处理
• 归一化后，class 和 style 都会分别挂载到 VNode 的 props.class 和 props.style，而非 attrs

事件监听器的标准化注册

事件名在归一化中经历大小写与命名空间处理：

• onXxx 形式的 prop（如 onClick）被识别为事件监听器，key 去掉 on 前缀并首字母小写（click），值存入 props.on.click 或 props.onClick（Vue 3 使用 props.on 对象）
• 支持修饰符语法糖：如 onClickCapture → { capture: true }；onKeydownEnter → { key: 'Enter' }；这些修饰信息在归一化阶段被解析并附加到事件处理器配置中
• 不带 on 前缀的 click、input 等直接作为原生属性写入 attrs，不会被当作事件监听器（除非手动用 v-on:click 指令）

内置指令与特殊 prop 的拦截与转换

某些属性名具有语义优先级，会在归一化中被提前识别并转换：

• ref、key、slot、is 等属于 VNode 核心字段，直接挂载到 VNode 实例上，不进入 props 或 attrs
• modelValue（Vue 3）或 value（Vue 2）配合 onUpdate:modelValue 会被识别为 v-model 协议，在归一化中合并为 props.modelValue 与 props['onUpdate:modelValue']
• to、replace、custom 等在特定组件（如 ）中可能被提取为专用 prop，绕过通用 attrs 逻辑

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。