Vue事件系统剖析：原生DOM与自定义组件事件的实现路径

Vue 将事件处理机制分离为两个独立的部分，一个是直接利用浏览器原生事件，另一个是为组件内部事件设计了一套机制，这两者互不干扰。前者遵循浏览器的运行逻辑，后者则采用发布订阅的方式运作。本文围绕 v-on 这个指令展开，通过分析运行时的代码，详细描述了整个实现过程。

一、架构概览

Vue 的事件绑定分为两条主线：

原生事件绑定

借助 @click 或 v-on:click 直接作用在常规 DOM 元素上，最终会运用浏览器的 addEventListener 进行处理

组件事件绑定

使用 @click 指令作用于子元素标签时，本质上父元素在监听子元素发出的特定信号，该信号由子元素借助 $emit 机制主动发送，整个过程不涉及 DOM 的直接参与。

二、初始事件连接：经由抽象语法树完成事件监听器添加

1.编译阶段

模板里的 @click="handler" 在经过模板编译器分析后，会变成一个抽象语法树，这个树最终会被转换成 VNode 的 data.on 属性，其值为 { click: handler }。

2.运行时挂载

初始化构建期间，补丁流程会启动 createElm 操作，针对实际 DOM 元素实施 invokeCreateHooks 功能，其中 cbs.create 项目囊括了 updateDOMListeners 方法，该方法是

在src/platforms/web/runtime/modules/events.js这个文件里，可以找到相关代码实现

updateDOMListeners 的职责：

3.更新阶段

组件发生变更之际，patch 函数会再次执行 updateDOMListeners 操作，借助 sameVnode 函数来比对事件是否存在差异，针对过时的事件进行删除处理，同时为新的事件完成绑定工作。

三、组件事件绑定：on + events + emit

1.父组件编译

编译后，VNode 的

该对象的点击事件处理器不会在生成的 HTML 元素属性中显示出来，其配置形式为 componentOptions.listeners 设置为 { 点击: 处理函数名 }。

2.子组件初始化

子组件实例化时：

3.手动触发

子组件中发出内部事件时，会触发相应操作，具体为，传递参数，事件名称为点击，附带数据，数据内容为payload，随后进行后续处理。

整个流程和浏览器的事件系统没有任何关联，所以能够实现不同层级的互相传递信息，并且传递的信息内容可以加以限制。

四、.native：在组件根节点强制使用原生事件

改用 nativeOn 而不是 on，在执行时 updateDOMListeners 会去获取 nativeOn，整个过程遵循原生事件的处理方式，将事件绑定在组件的根节点 DOM 元素上。

五、事件修饰符实现细节六、性能与内存考量结论

Vue的事件处理机制借助“构建阶段重写+执行时分发”达成深度封装：

明白这种分层构造，可以在繁杂状况（服务器端呈现、微前端、定制化渲染工具）里准确找到事件相关难题。

本文来自作者[admin]投稿，不代表芝麻开门立场，如若转载，请注明出处：https://aizmkm.com/zshi/202509-6107.html