Vue中事件绑定的原理

之前我搜这个原理的时候，好多文章，都只写了俩句话：

原生事件绑定是通过addEventListener绑定给真实元素的。
组件事件绑定是通过Vue自定义的key$on实现的。

那具体是怎么实现的呢， 没有说？
就现在具体看一下。

// 原生事件绑定
<div @click="fn()"></div>

// 组件绑定
<my-component @click.native="fn" @click="fn1"></my- component>

原理：
事件的编译：

let compiler = require('vue-template-compiler'); //vue-loader
let r1 = compiler.compile('<div @click="fn()"></div>'); 
let r2 = compiler.compile('<my-component @click.native="fn" @click="fn1"></my- component>'); console.log(r1); 
// {on:{click}} console.log(r2); 
// {nativeOn:{click},on:{click}}

两者编译出来不一样

// 前者
with (this){
   <