patchProps 是 Vue 3 内部用于更新 VNode 属性与事件监听器的核心函数，负责标准化事件名、动态增删监听器、分流处理原生/自定义事件，并将事件生命周期纳入虚拟 DOM 协调体系。
在 Vue 3 的底层渲染机制中，patchProps 并不是一个直接暴露给开发者的 API，而是 runtime-core 内部用于更新 VNode 属性（包括事件）的核心函数。它不负责“绑定事件”，而是根据新旧 props 差异，决定如何设置、更新或移除 DOM 元素的属性与事件监听器。要真正理解事件绑定如何通过 VNode 和 patchProps 落地，需结合响应式更新、VNode 创建、diff 策略与平台补丁逻辑来看。
事件名标准化：从 onXxx 到小写 addEventListener
Vue 模板中写的 @click="handler" 或 JSX 中的 onClick: handler，在编译后会转为 VNode 的 props 对象中的 onClick 字段。但真实 DOM 不认 onClick，只接受 click 这类小写事件名。因此 patchProps 在处理事件时，会做标准化转换：
- 识别以
on开头的 key（如onClick、onInput），截取后缀并转为小写（click、input） - 调用
add/removeEventListener，而非设置el.onclick = fn—— 这保证了可多次绑定、支持捕获/被动等选项 - 若值为数组（如
[fn, { once: true }]），会自动解构并传入addEventListener第三个参数
事件监听器的动态更新与清理
patchProps 不只是“加监听器”，更关键的是在组件更新时精准比对、复用或销毁：
- 若旧 props 有
onClick: oldFn，新 props 改为onClick: newFn，则先removeEventListener('click', oldFn)，再addEventListener('click', newFn) - 若新 props 中该事件字段为
null或undefined，直接移除对应监听器，避免内存泄漏 - 对于内联函数（如
@click="count++"），每次 render 都生成新函数，导致频繁移除+重绑——这是性能隐患，应尽量用方法引用或useCallback类思路缓存
自定义事件与原生事件的分流处理
Vue 组件的 emits 声明会影响事件是否透传到根元素。这个判断发生在 patchProps 之前，由 renderComponentRoot 或 createApp 的代理逻辑完成：
- 若组件声明了
emits: ['submit']，且父级传入onSubmit，该事件不会进入根 DOM 元素的props，而是被内部emit机制消费 - 若未声明但传了
onScroll，则视为原生事件，交由patchProps处理并绑定到根元素 - 可通过
v-bind="$attrs"显式透传所有未声明事件（配合inheritAttrs: false）
实战：手动触发 patchProps 更新事件（调试/高级场景）
虽然日常开发无需调用 patchProps，但在编写自定义渲染器、调试 diff 行为或封装底层工具时，可能需要模拟其行为：
- 获取当前 DOM 元素和新旧 VNode：
const el = vnode.el; const prevProps = vnode.patchFlag ? vnode.props : null; - 调用内部函数（仅限 dev 模式调试）：
import { patchProps } from 'vue/dist/vue.runtime.esm-bundler.js'; patchProps(el, prevProps, nextProps, isSVG, null); - 注意：该函数依赖完整上下文（如 renderer options、patchFlags），生产环境不应直接使用；推荐方式仍是通过响应式数据驱动 VNode 重绘
真正掌握事件绑定，不是背住 patchProps 的签名，而是看清它如何串联模板编译、响应式触发、VNode diff 与 DOM 操作这一整条链路。事件能“自动更新”，本质是 Vue 把 addEventListener 的生命周期，完全纳入了虚拟 DOM 的协调（reconciliation）体系中。
