Vue.js事件监听卸载与更新技巧

Vue.js 在 DOM 更新时通过 patch 过程智能管理事件监听器的卸载与更新：当旧 vnode 有而新 vnode 无对应事件时自动逐个解绑；新旧 vnode 均存在同名事件但 handler 引用不同时，先解绑再重绑——这意味着内联箭头函数会频繁触发不必要的移除与重建，而 methods 中定义的稳定函数才是高效实践；修饰符（如 .once、.capture、.native）仅影响绑定方式，卸载逻辑保持一致；值得注意的是，自定义组件事件（@custom-event）走的是 Vue 实例级事件机制，完全脱离 DOM patch 流程，其生命周期需由父组件手动协调，尤其在 keep-alive 场景下更需谨慎处理，避免内存泄漏或意外响应。

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

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

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

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

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

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

• 注意：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 中控制）

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~