从源码看Vue中模板的自定义事件、DOM事件的绑定过程

Vue中事件的基础

1.Vue中如何绑定事件

​ Vue框架相比于React框架，提供了模板的功能，而模板与HTML代码极为相似，这使得我们可以花费很少的时间从原生到Vue框架的过渡，这是Vue的优点之一。不过模板到处理的时候只是一个字符串，而不是真正的HTML代码。所以如果我们以原生的方式来对节点进行监听的话，很可能会出错。这是因为有可能模板还没有渲染到页面上。不过，Vue推荐使用在模板上进行事件绑定的功能。下面是使用的例子：

// 下面是模板
<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {
  { counter }} times.</p>
</div>

// 下面是Vue
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

以上是对DOM节点进行监听：在想要进行监听的节点上添加v-on:click即可进行监听，也可以使用简写@click来进行监听。

如果对于组件类型的节点的监听，如何使用呢？答案还是按照上面的来进行使用。只不过更加广泛，可以自己定义事件的类型，比如使用@myHandler、@myClick等等。不过它们的触发是在组件中主动触发的，而不是使用到了DOM的事件监听。

<!-- 没有效果 -->
<my-component v-on:my-event="doSomething"></my-component>

// 触发事件(被监听的组件内部使用)
this.$emit('my-event')

不过组件的话，也支持对最外层的节点进行监听的功能，只需要使用@click.native即可对容器内部最外层的DOM节点进行事件监听。

2.Vue中事件的分类

在模板中，无非有两中类型的节点：组件节点和DOM节点。对于这两种节点的处理方式是不同的，所以有两种类型的事件：

1. DOM类型事件，这种最终在**创建节点的时候会自动进行事件的监听，在撤销节点的时候自动进行事件的解除。**所以框架帮我们考虑了这些绑定与解绑操作。
2. 自定义事件：这种是绑定在组件上的事件，最后不会像DOM类型的事件那样进行处理，而是使用到了Vue的自定义的事件系统，也就是在组件层面上的事件监听。所以它和普通标签的事件的处理方式是完全不同的。下面就直接讲几个要点吧：
   • Vue内部实现了一个事件类，不过是和Vue框架结合在一起，如果想要看抽离出来的代码的话，我这里有一份：TypeScript简单实现Vue内部的事件类
   • 每个Vue实例（包括组件实例）内部都有一个事件类实例，所以不同组件中进行绑定事件的时候是不会互相冲突的。

我这里就先讲这么多，后面再细细讲解它们分别怎么实现的。

事件从模板上到绑定的整个流程

从开启一个Vue应用的时候（具有编译功能的Vue框架版本），是怎么创建和绑定事件的？这是本部分需要进行讲解的。在介绍之前，需要以一个例子来说明，这样读者会比较清楚如何进行处理，以及处理的结果。

let component = {
   
  template: '<span data-name="Weybn">