讲师中心 微信公众号
AI工具推荐 视频效率加速

Vue.js中h函数生成VNode时的属性归一化与规范化流程

云伟小哥_9096

云伟小哥_9096

发布时间:2026-04-11 10:57:37

|

503人浏览过

|

来源于php中文网

原创

Vue.js 的 h 函数对属性执行归一化处理:props 与 attrs 按组件声明自动分离;class/style 深度合并并统一格式;事件监听器标准化(onXxx→小写键+修饰符解析);ref/key/modelValue 等特殊 prop 被优先拦截转换。

vue.js中h函数生成vnode时的属性归一化与规范化流程

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 是特殊处理的属性,支持多种格式输入并自动归一化为统一结构:

用于自动切换项目中适合的node 版本
用于自动切换项目中适合的node 版本

根据 package.json 中的 engines 字段自动检测 Node.js 版本需求,未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。

下载
  • 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 等在特定组件(如 <RouterLink>)中可能被提取为专用 prop,绕过通用 attrs 逻辑

热门AI工具

更多
二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2603

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5623

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6630

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

6298

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

903

2024.05.22

讯飞绘文AI选题与热点策划合集
讯飞绘文AI选题与热点策划合集

本专题介绍讯飞绘文选题中心与AI选题方法,涵盖热点发现、赛道筛选、选题评估和内容规划,解决创作者找灵感难题。

0

2026.10.22

Playwright 测试失败怎么办
Playwright 测试失败怎么办

Playwright测试失败专题汇集超时、定位器匹配、浏览器提前关闭、依赖与插件配置、文件上传、SSL及Docker启动等故障文章,并介绍通过截图、报告和Trace定位错误。

20

2026.10.21

Playwright 页面操作指南
Playwright 页面操作指南

Playwright页面操作专题汇集元素定位、点击与输入、等待响应、多页面切换、Iframe、事件监听及文件处理的已审核文章,便于按操作场景查阅示例与常见问题。

0

2026.10.21

Playwright 入门教程
Playwright 入门教程

Playwright入门专题汇集测试框架安装、VS Code配置、录制脚本、编写首个用例、运行调试及查看报告的已审核文章,帮助初学者搭建端到端测试流程。

0

2026.10.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn