摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之绑定组件事件上一篇已经
写文章不容易，点个赞呗兄弟
专注 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]
);
}
}
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105486.html
摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之绑定标签事件这里的绑定 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...
摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之绑定组件自定义事件组件 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...
摘要：首先，兄弟，容我先说几句涉及源码很多，篇幅很长，我都已经分了上下三篇了，依然这么长，但是其实内容都差不多一样，但是我还是毫无保留地给你了。 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也...
摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理白话版事件是我最感兴趣的东西之 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...
摘要：执行的时候，会绑定上下文对象为组件实例于是中的就能取到组件实例本身，的代码块顶层作用域就绑定为了组件实例于是内部变量的访问，就会首先访问到组件实例上。其中的获取，就会先从组件实例上获取，相当于。 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本 【2.5.17】 如果你觉得...
阅读 2883·2021-10-14 09:43
阅读 3046·2021-09-30 09:47
阅读 613·2021-08-17 10:11
阅读 1491·2019-08-30 11:15
阅读 887·2019-08-26 13:54
阅读 3402·2019-08-26 11:47
阅读 1065·2019-08-26 10:20
阅读 2705·2019-08-23 18:35
