写文章不容易,点个赞呗兄弟
专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧
研究基于 Vue版本 【2.5.17】
如果你觉得排版难看,请点击 下面链接 或者 拉到 下面关注公众号也可以吧
【Vue原理】Compile - 源码版 之 generate 拼接绑定的事件
今天我们来探索事件的拼接啦,上一篇我们已经讲过了generate 阶段 节点数据的拼接
事件也属于其中一部分内容,但是由于内容实在太多太多太多太多,所以打算单独拿出来讲啦
这就是 Compile 的最后一篇文章了!终于终于发完了…真的发恶心了,估计网上找不着我这么详细的 compile 文章了(找到当我没说)
本文章很长,一万多字,但是其实都是代码和例子,帮助我们理解的,没有什么,一路看下来绝壁没有压力,源码也是简化过的
好吧,开始正文
从上篇文章我们知道了,节点数据拼接,调用的是 genData$2 方法
现在我们就来回顾下这个方法(只保留了 事件 相关)
function genData$2(el, state) {
var data = '{';
.....已省略其他属性拼接
// 事件
if(el.events) {
data += genHandlers(el.events, false) + ",";
}
// 原生事件
if(el.nativeEvents) {
data += genHandlers(el.nativeEvents, true) + ",";
}
data = data.replace(/,$/, '') + '}';
return data
}
没错,事件,分为 组件原生事件 和 事件
组件原生事件
顾名思义,就是给组件绑定的原生DOM事件,像这样
事件
而这个呢,包含范围很广,包括 组件上的自定义事件,以及 标签上的原生事件,如下
他们调用的方法都是 genHandlers,都是把结果值直接拼接上 data ,那有什么不同呢?
不同就在于给 genHandlers 传的最后一个参数,现在我们把视角切到 genHandlers 方法上
genHandlers
function genHandlers(
events, isNative
) {
var res = isNative ? 'nativeOn:{': 'on:{';
var handler = events[name]
for (var name in events) {
res += ` ${name} : ${ genHandler(name,handler )} ,`
}
return res.slice(0, -1) + '}'
}
这里非常明显看到
当你传入 isNative=true 的时候,该事件即为 组件原生DOM 事件,需要拼接在 nativeOn:{} 字符串上
否则,就是事件,拼接在 on:{} 字符串上
先给个简单的例子来熟悉下
拼接后的字符串是这样的
`_c('div', {
on: { "click": aa }
},[
_c('test', {
on: { "test": cc },
nativeOn: {
"input":$event=>{
return bb($event)
}
}
})
])`
好的,大家大概有个了解了,下面我们将会探索事件内部复杂的拼接了
因为需要涉及到各种许多的 modifiers
这次之前,先给大家介绍 Vue 内部已经设置了的按键值
按键内部配置
Vue 把几个常用的按键给配置了,当然了,内部设置的键名,你都是可以覆盖配置的
很简单,过下眼,没啥好说的,不过下面会用到
记住,keyCodes 和 keyName 是 Vue 内部配置键盘的变量
// 键盘和 code 映射
var keyCodes = {
esc: 27, tab: 9,
enter: 13, space: 32,
up: 38, left: 37,
right: 39, down: 40,
delete: [8, 46]
};
// 键盘名映射
var keyNames = {
esc: 'Escape',
tab: 'Tab',
enter: 'Enter',
space: ' ', // IE11 使用没有 Arrow 前缀的键名
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete']
};
看完了 Vue 的按键配置,我们来看 Vue 内部配置的修饰符
修饰符内部配置
相信大家在项目中,都有用到过修饰符吧,很方便对不对,就是下面这些 stop prevent,很方便对不对
简直不要太方便,其实 Vue 也没做什么太多东西,不过是帮我们自动组装上了几个语句
来看看 Vue 配置的修饰符
var modifierCode = {
stop: '$event.stopPropagation();',
prevent: '$event.preventDefault();',
ctrl: genGuard("!$event.ctrlKey"),
shift: genGuard("!$event.shiftKey"),
alt: genGuard("!$event.altKey"),
meta: genGuard("!$event.metaKey"),
self: genGuard("$event.target !== $event.currentTarget"),
left: genGuard("'button' in $event && $event.button !=