Vue通过patchProps统一接管DOM属性更新，封装兼容性细节，按类型分发至模块处理，标准化class/style等写法，并硬编码适配IE等浏览器痛点，实现跨浏览器一致、可控、可靠的行为。
Vue 并不直接操作原生 DOM 属性，而是通过 patchProps 统一接管所有属性更新逻辑，把浏览器兼容性细节封装在内部模块中。它不是“抹平差异”后暴露给用户，而是从源头就规避了手动操作 DOM 属性带来的兼容问题。
patchProps 的核心职责
它负责将新 VNode 的 props（如 class、style、id、disabled、自定义指令等）同步到真实 DOM 元素上，并确保行为一致、性能可控、兼容可靠。整个过程不依赖开发者写 el.setAttribute 或 el.className = ... 这类易出错的原生调用。
- 区分静态属性与动态属性：借助
patchFlag，跳过未变化的静态 props（如固定id、data-*），避免无效遍历 - 按类型分发处理：不同 prop 类型由不同模块（modules）处理，比如
class交由patchClass，style交由patchStyle，事件监听器交由patchEvent - 统一 normalize 行为：例如
class支持字符串、数组、对象写法；style支持驼峰/短横线、对象/字符串；这些都在 patch 阶段标准化，不交给浏览器解释
关键兼容性处理示例
Vue 内部模块对常见兼容痛点做了硬编码适配：
-
class 属性：使用
el.className设置时，IE 会自动 trim 空格、合并重复项；Vue 改用el.setAttribute('class', ...)或el.classList（现代浏览器）+ fallback（旧版）组合策略，保证多空格、重复类名的精确还原 -
style 属性：自动转换驼峰式（
fontSize）为短横线（font-size），并过滤非法 CSS 值；对display: none在 IE8 下的 bug 做了兜底 -
布尔属性（
disabled、checked、readonly）：不依赖setAttribute的真假值语义，而是严格按“存在即 true”，用el.disabled = true/false赋值，避免某些浏览器对空字符串或"false"的误判 -
自定义事件绑定：对
@click.stop这类修饰符，统一用addEventListener+event.stopPropagation()实现，绕开 IE8 的attachEvent陷阱
模块化设计让兼容可维护
Vue 把属性处理拆成独立模块（如 modules/attrs.ts、modules/class.ts、modules/event.ts），每个模块只专注一类行为。这种设计带来两个好处：
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
- 新增兼容逻辑只需改对应模块，不影响其他属性路径
- 在 SSR 或非浏览器环境（如 Node.js 渲染）中，可替换模块实现，保持接口一致
比如 patchAttr 模块中，对 value 属性的处理会判断是否是 <input> 或 <textarea>，再决定走 el.value = ... 还是 el.setAttribute('value', ...)，避免表单控件值被意外覆盖。
不依赖浏览器默认行为，而是主动控制
Vue 的 patchProps 本质是“重写浏览器属性语义”。它不假设 el.setAttribute('hidden', '') 在所有浏览器都生效，而是直接设置 el.hidden = true；也不信任 el.style.cssText = '...' 的解析一致性，而是逐条设置 el.style[key] = value 并做 key 标准化。
这种控制力来自对 VNode props 的完全掌控——所有属性变更都必须经过 patchProps 流程，没有“漏网之鱼”。这也正是 Vue 能稳定支持 IE9+（Vue 2）或现代浏览器（Vue 3）的关键底层机制。
