写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者拉到下面关注公众号也可以吧

【Vue原理】Event - 源码版之绑定组件DOM事件

上一篇已经说了绑定正常标签的原生事件，今天是组件的原生事件，两者最终作用是一样的，但是过程有少少不同

最近更新快是因为文章早就写完了，只是定时发而已哈哈

官网已经说明，要是想在组件上绑定原生事件，需要加上 native 修饰符

怎么解析

这里一样，解析不是本文重点，只给出结果

现在，我有这么一个模板

被解析成这样的渲染函数

然后生成这样的 VNode

这个VNode 是外壳vnode，我们已经知道外壳 vnode 是保存父子组件关联的数据

比如 props，事件之类的

所以你在组件上绑定的原生事件，自然而然就是保存在外壳vnode 上啦

绑定在外壳vnode 的数据，是要在解析组件内部模板时，才会拿出来使用的

然后！

你可以看到，nativeOn 和 on 都保存有事件

其实解析的时候，只保存在了 nativeOn，on 是后面从 nativeOn 直接赋值过去的

打印组件实例可以看到

耶！Vnode 相关又可以看这篇哦

【Vue原理】VNode - 源码版

怎么绑定

绑定的流程千篇一律，但是有少少出入

可以参考我这篇，绑定原生事件的文章

【Vue原理】Event - 源码版之绑定标签DOM事件

相同的地方简单提一下，不同的地方再仔细说

1、绑定事件发生在挂载DOM的阶段，从 Vue.prototype._update 开始

2、_update 其中会调用 createElm 来生成DOM

3、createElm 碰到组件，会转去解析组件

function createElm(vnode) {       if (        createComponent(vnode, parentElm, refElm)    ) {        return    }    ....普通标签的DOM生成和挂载}

进入到 createComponent

function createComponent(vnode, parentElm, refElm) {        var i = vnode.data;        if (isDef(i)) {                // ... 创建组件实例        if (如果组件实例已经创建成功) {            initComponent(vnode);                        return true        }    }}

没啥好说的，继续转到了另一个函数

function initComponent(vnode) {    invokeCreateHooks(vnode);}

然后这个函数还是为了调用 invokeCreateHooks 这个函数

invokeCreateHooks 上篇文章也出现过，作用是调用各种数据处理函数，比如处理 prop，class 等，其中还包括处理事件的函数 updateDOMListeners

updateDOMListeners 这个函数在上一篇文章中已经说过啦，大家可以看一下
Event - 源码版之绑定标签DOM事件

但是我依然给复制源码到这里，但是不写解析

function updateDOMListeners(oldVnode, vnode) {      var on = vnode.data.on || {};        var oldOn = oldVnode.data.on || {};    var target = vnode.elm;        // 遍历绑定的事件    for (name in on) {        newHandler = on[name];        oldHandler = oldOn[name];           // 没有旧事件，就直接添加新事件        if (typeof oldHandler === "undefined") {                        // 给事件回调包装一层            target.addEventListener(name, function(){                on[name]() // 执行保存在vnode的事件            });        }               // 新事件和旧事件不一样，替换旧事件        else if (newHandler !== oldHandler) {            on[name] = newHandler;        }    }       // 移除旧事件    for (name in oldOn) {          // 旧事件不存在新事件中，直接移除          if (typeof on[name] === "undefined") {            target.removeEventListener(                name, oldOn[name]            );        }    }}