Vue.js 的 patch 过程自动处理事件监听器的卸载与更新：旧 vnode 有而新 vnode 无 on 时遍历解绑；新旧均有同名事件且 handler 引用不同时先解绑再绑定；修饰符影响绑定方式但不改变卸载逻辑；自定义组件事件由实例层面管理，不在 DOM patch 流程中。

Vue.js 的 patch 过程在更新 DOM 时，会自动处理事件监听器的卸载与更新，核心逻辑在于比对新旧 vnode 的 on（或 listeners）对象，并按需移除旧监听、绑定新监听。

事件监听器的卸载发生在 oldVnode 有监听但 newVnode 没有时

当 patch 进入 patchVnode 阶段，若 oldVnode 的 data.on 存在而 newVnode 的 data.on 为 null/undefined/空对象，Vue 会遍历 oldVnode 的所有事件名，调用 removeEvent（内部通过 el.removeEventListener）逐个解绑。

• 例如：从 <button @click="handleA"> 更新为 <button>，handleA 对应的监听器会被清除
• 卸载不依赖函数引用是否相等，而是基于事件类型 + 绑定时的原始 handler（Vue 内部做了缓存和映射）

事件监听器的更新发生在新旧 on 对象都存在且事件名相同时

Vue 会对新旧 on 对象做浅层比对。若同一事件名（如 click）在新旧 vnode 中都存在，且 handler 函数引用不同，则先解绑旧 handler，再绑定新 handler。

Vue Composition Analyzer

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

下载

• 注意：Vue 不做深度函数比对，仅判断引用是否一致；因此使用内联箭头函数（@click="() => doX()"）会导致每次渲染都触发卸载+重绑
• 推荐写法是用 methods 中定义的方法或计算属性返回的稳定函数，避免不必要的移除与重建

使用 v-on.native 或 .once/.capture 等修饰符时的行为

修饰符会影响事件绑定方式，但卸载逻辑不变。Vue 将修饰符信息编译进 handler 包装函数中（如 .once 会生成一个只执行一次的 wrapper），并在卸载时一并清除该 wrapper。

立即学习“前端免费学习笔记（深入）”；

• v-on:click.native 的监听器由 Vue 直接调用 addEventListener 绑定，卸载时也走原生 removeEventListener
• @click.stop 等事件修饰符不会单独创建监听器，而是包装在同一个 handler 内部处理，不影响卸载粒度

自定义组件上的事件监听需要额外注意

对于子组件，@custom-event 实际监听的是子组件通过 $emit 触发的事件，属于 Vue 实例层面的事件总线机制，不涉及 DOM addEventListener，因此不在 patch 的 DOM 事件卸载流程中。

• 这类监听的清理由父组件实例在 beforeDestroy（Vue 2）或 unmounted（Vue 3）时统一处理
• 但若子组件是 keep-alive 缓存的，其事件监听可能持续存在，需手动管理（如在 activated/deactivated 中控制）