vei 是挂载在 DOM 元素上的 _vei 对象，作为事件调度中心缓存各事件的 invoker；invoker 封装执行逻辑与当前处理器，通过 value 属性动态更新，避免重复增删监听器，实现轻量高效事件管理。
Vue 通过 patchEvent 和 _vei（Vue Event Invoker）机制，在事件绑定环节实现轻量、可复用、低开销的更新逻辑，核心是避免重复添加/移除监听器，并将事件处理函数与 DOM 元素强关联。
vei 是什么：每个元素的事件调度中心
el._vei 是挂载在 DOM 元素上的普通对象，用于缓存该元素所有已注册事件的 invoker（调用器）。它不是原始事件处理器，而是一个封装了执行逻辑和当前值的中间层函数。关键特性包括：
- 一个事件名（如
@click→"onClick"）对应一个_vei[eventName]，避免多次addEventListener - invoker 内部持有
.value属性，指向当前生效的事件处理函数（支持单个函数或数组） - 调用时直接执行
invoker.value(evt)，不重新创建闭包，也不依赖上下文绑定 - 卸载事件时，只需从
_vei中删掉对应项 + 调用removeEventListener，无需遍历查找
patchEvent 的三步更新逻辑
patchEvent(el, eventName, prevValue, nextValue) 是运行时事件更新的统一入口。它不直接操作原生 API，而是基于 _vei 做状态同步：
- 若
nextValue存在且已有同名 invoker，则仅更新invoker.value = nextValue，不触发任何 DOM 操作 - 若
nextValue存在但无 invoker，则新建 invoker、绑定原生监听、存入_vei - 若
nextValue为空但存在旧 invoker，则先解绑原生监听，再从_vei中删除该键
这种设计让事件更新退化为纯 JS 对象赋值，规避了高频 addEventListener/removeEventListener 的性能损耗，尤其在列表渲染中反复切换事件处理器时优势明显。
为什么不用 addEventListener 直接替换？
原生 addEventListener 不允许“覆盖”同一事件类型的不同处理器——你必须先 remove 再 add。而 Vue 需要支持模板中动态绑定不同函数，例如：
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
若每次更新都走原生增删流程，不仅耗时，还会导致事件监听器数量失控（尤其配合 v-for）。_vei 把“绑定关系”收敛到单个函数对象上，使一次更新只涉及一次 DOM 监听器生命周期管理，大幅降低运行时成本。
Vapor 模式下的演进：委托优先
在 Vue 3.6+ Vapor 中，patchEvent 的策略进一步升级：
- 对冒泡事件（如 click、input），首次遇到即在
document统一绑定委托处理器，元素只存$evt{type}句柄（可能是数组） - 非冒泡事件（如 focus）、带修饰符（
.once/.capture/.passive）仍走传统直绑，由_vei管理 - 委托模式下，
_vei退为辅助缓存，主逻辑交由全局事件分发器完成，监听器总数趋近常数级
这标志着 Vue 从“元素级事件缓存”迈向“应用级事件治理”，是编译期分析与运行时优化协同的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
