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></button>更新为<button></button>，handleA对应的监听器会被清除 - 卸载不依赖函数引用是否相等，而是基于事件类型 + 绑定时的原始 handler（Vue 内部做了缓存和映射）
事件监听器的更新发生在新旧 on 对象都存在且事件名相同时
Vue 会对新旧 on 对象做浅层比对。若同一事件名（如 click）在新旧 vnode 中都存在，且 handler 函数引用不同，则先解绑旧 handler，再绑定新 handler。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章