【每日十分钟前端】Vue篇1，Vue事件绑定原理是什么

1.原生dom事件的绑定,是通过addEventListener绑定给真实元素的；
2.组件事件绑定是通过自定义$on方法实现的。

 

---

绑定事件通过使用 v-on:事件名=函数名 完成的

1、原生标签dom的绑定

vue中绑定事件是直接绑定给真的dom元素的。
在解析得到VNode创建完毕后，绑定事件发生在开始挂载，创建dom之后的阶段。

1、开始挂载

VNode创建完毕，传入Vue.prototype._update这个函数，对VNode进行新旧对比，然后生成DOM挂载页面。

2、创建DOM

创建真实DOM，调用createElm方法，根据vnode生成DOM，并进行挂载，默认会调用invokeCreateHocks，处理模板上的相关数据。

3、处理数据

就是一个单纯遍历的过程，其中就包括处理DOM事件的函数，便是updateDOMListeners，传入add方法。

4、绑定DOM事件

主要是绑定事件和解绑事件：addEventListener和removeEventListener。

主要逻辑是：
(1)、新旧事件相同，替换旧事件
(2)、新事件不存在旧事件中，绑定新事件
(3)、旧事件不存在新事件中，解绑旧事件

2、组件DOM事件的绑定

想要在组件上绑定原生事件，需要加上.native修饰。

在解析时绑定在外壳vnode中，等到解析内部模板时，才会拿出来使用。

1、前面都一样，到createElm的时候，遇到的是组件，会转去解析组件，进入createComponent。
2、然后还是回到调用invokeCreateHooks的流程。