深度剖析 patchProp 源码，看 Vue 是如何抹平不同浏览器属性差异的-Vue.js-PHP中文网

vue通过patchprops统一接管dom属性更新，封装兼容性细节，按类型分发至模块处理，标准化class/style等写法，并硬编码适配ie等浏览器痛点，实现跨浏览器一致、可控、可靠的行为。

深度剖析 patchprop 源码，看 vue 是如何抹平不同浏览器属性差异的

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 Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

新增兼容逻辑只需改对应模块，不影响其他属性路径
在 SSR 或非浏览器环境（如 Node.js 渲染）中，可替换模块实现，保持接口一致

比如 patchAttr 模块中，对 value 属性的处理会判断是否是 <input> 或 <textarea></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）的关键底层机制。