Vue组件是如何进行处理v-on/@定义的事件的

我们在使用Vue框架的时候，最亲切的感觉是莫过于它将组件开发中的HTML、CSS、JS代码分割开来，保持着原生开发的习惯。并且template语法提供比原生更加强大的功能，对于事件监听来说，他提供@click.left、@click.preventDefault等等修饰方法，有没有想过框架的内部是如何实现的呢？下面就来讲解，尽量少讲代码，多讲流程和方法，因为这一部分代码就很多中情况考虑的多，多讲代码反而不好。

将template上面的事件绑定转为AST

Vue框架对template处理的流程是：

1. 词法解析：词法分析即对template语法进行判断是否使用不当，比如一些标签只能作为单标签，一些标签只能作为双标签，有些两者都能够使用。如果用户使用出错的话会在这一层提示。
2. 句法解析：基于语法分析进行的，对于键值对等信息进行分析，如一些动态的属性，就进行动态属性处理，一些静态属性交由静态属性处理器处理。
3. 生成抽象语法树：将上述处理的结果生成抽象语法树，抽象语法树的基本单位是标签、表达式、普通文本，生成树状结构，代表着代码的嵌套结构。
4. 由抽象语法树生成渲染函数，并且交由渲染函数观察者来使用。

将AST上面事件进行动态生成函数（重点）

在句法分析的时候，会对@click.left="handler"进行处理，会进行分类：

1. 浏览器内置事件，指的是我们原生使用到的那些事件，比如说click、input等等
2. Vue内部事件系统，即我们对组件自定义的事件。$emit、$on什么的。

接下来我们重点来讲解普通的事件：

事件分为event和nativeEvent，event针对于普通的标签，而nativeEvent针对于组件化的标签（对于组件的第一个元素进行事件监听）。不过两者的区别不是很大，我们拿events来进行讲解：

首先我们写一个例子：

对span标签进行添加事件，那么抽象语法树的节点的样子如下：

模板编译器会将我们写进去的修饰放在