Vue源码学习(二十):$emit、$on实现原理
好家伙,
0、一个例子
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>Vue 父子组件通信示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head> <body>
<div id="app">
<parent-component></parent-component>
</div> <script>
// 子组件
Vue.component('child-component', {
template: `
<div>
<button @click="sendDataToParent">发送数据给父组件</button>
</div>
`,
methods: {
sendDataToParent() {
this.$emit('data-sent', '这是从子组件发送的数据');
}
}
}); // 父组件
Vue.component('parent-component', {
template: `
<div>
<child-component @data-sent="handleDataReceived"></child-component>
<p>从子组件接收到的数据：{{ receivedData }}</p>
</div>
`,
data() {
return {
receivedData: ''
};
},
methods: {
handleDataReceived(data) {
this.receivedData = data;
}
}
}); // 创建Vue实例
let vm = new Vue({
el: '#app'
});
</script>
</body> </html>
1、$emit、$on源码
源码实现，我们来看$emit、$on的源码实现部分
Vue.prototype.$on = function (event, fn) {
var vm = this;
if (isArray(event)) {
for (var i = 0, l = event.length; i < l; i++) {
vm.$on(event[i], fn);
}
}
else {
(vm._events[event] || (vm._events[event] = [])).push(fn);
// optimize hook:event cost by using a boolean flag marked at registration
// instead of a hash lookup
if (hookRE.test(event)) {
vm._hasHookEvent = true;
}
}
return vm;
};
Vue.prototype.$emit = function (event) {
var vm = this;
// 处理大小写
{
var lowerCaseEvent = event.toLowerCase();
if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
tip("Event \"".concat(lowerCaseEvent, "\" is emitted in component ") +
"".concat(formatComponentName(vm), " but the handler is registered for \"").concat(event, "\". ") +
"Note that HTML attributes are case-insensitive and you cannot use " +
"v-on to listen to camelCase events when using in-DOM templates. " +
"You should probably use \"".concat(hyphenate(event), "\" instead of \"").concat(event, "\"."));
}
}
var cbs = vm._events[event];
if (cbs) {
cbs = cbs.length > 1 ? toArray(cbs) : cbs;
var args = toArray(arguments, 1);
var info = "event handler for \"".concat(event, "\"");
for (var i = 0, l = cbs.length; i < l; i++) {
invokeWithErrorHandling(cbs[i], vm, args, vm, info);
}
}
return vm;
};
function invokeWithErrorHandling(handler, context, args, vm, info) {
var res;
try {
res = args ? handler.apply(context, args) : handler.call(context);
if (res && !res._isVue && isPromise(res) && !res._handled) {
res.catch(function (e) { return handleError(e, vm, info + " (Promise/async)"); });
res._handled = true;
}
}
catch (e) {
handleError(e, vm, info);
}
return res;
}
2.代码解释
看着比较复杂，所以我们精简一下，去掉性能优化和一些正则表达式还有一些数组处理
精简下来无非几句代码
$on
(vm._events[event] || (vm._events[event] = [])).push(fn);
$emit
var cbs = vm._events[event];
invokeWithErrorHandling(cbs[i], vm, args, vm, info);
function invokeWithErrorHandling(handler, context, args, vm, info) {
res = args ? handler.apply(context, args) : handler.call(context);
return res;
}
分析:
$emit、$on的实现使用了观察者模式的设计思想
$on方法用于在当前Vue实例上注册事件监听器。
vm._events：维护一个事件与其处理函数的映射。每个事件对应一个数组，数组中存放了所有注册的处理函数。
$emit方法用于触发事件，当事件被触发时，调用所有注册在该事件上的处理函数。
非常简单
3.源码注释版本
// 在Vue的原型上定义一个方法$on
Vue.prototype.$on = function (event, fn) {
// vm指的是Vue的实例
var vm = this;
// 如果event是一个数组，那么对每个事件递归调用$on方法
if (isArray(event)) {
for (var i = 0, l = event.length; i < l; i++) {
vm.$on(event[i], fn);
}
}
// 如果event不是一个数组，那么将函数fn添加到vm._events[event]中
else {
(vm._events[event] || (vm._events[event] = [])).push(fn);
// 如果event是一个钩子事件，那么设置vm._hasHookEvent为true
if (hookRE.test(event)) {
vm._hasHookEvent = true;
}
}
// 返回Vue的实例
return vm;
}; // 在Vue的原型上定义一个方法$emit
Vue.prototype.$emit = function (event) {
// vm指的是Vue的实例
var vm = this;
// 处理事件名的大小写
{
var lowerCaseEvent = event.toLowerCase();
// 如果事件名的小写形式和原事件名不同，并且vm._events中有注册过小写的事件名
if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
// 那么提示用户事件名的大小写问题
tip("Event \"".concat(lowerCaseEvent, "\" is emitted in component ") +
"".concat(formatComponentName(vm), " but the handler is registered for \"").concat(event, "\". ") +
"Note that HTML attributes are case-insensitive and you cannot use " +
"v-on to listen to camelCase events when using in-DOM templates. " +
"You should probably use \"".concat(hyphenate(event), "\" instead of \"").concat(event, "\"."));
}
}
// 获取vm._events[event]中的所有回调函数
var cbs = vm._events[event];
// 如果存在回调函数
if (cbs) {
// 如果回调函数的数量大于1，那么将其转换为数组
cbs = cbs.length > 1 ? toArray(cbs) : cbs;
// 获取除event外的其他参数
var args = toArray(arguments, 1);
// 定义错误处理信息
var info = "event handler for \"".concat(event, "\"");
// 对每个回调函数进行错误处理
for (var i = 0, l = cbs.length; i < l; i++) {
invokeWithErrorHandling(cbs[i], vm, args, vm, info);
}
}
// 返回Vue的实例
return vm;
}; // 定义一个错误处理函数
function invokeWithErrorHandling(handler, context, args, vm, info) {
var res;
try {
// 如果存在参数args，那么使用apply方法调用handler，否则使用call方法调用handler
res = args ? handler.apply(context, args) : handler.call(context);
// 如果返回结果res存在，且res不是Vue实例，且res是一个Promise，且res没有被处理过
if (res && !res._isVue && isPromise(res) && !res._handled) {
// 那么对res进行错误处理，并标记res已经被处理过
res.catch(function (e) { return handleError(e, vm, info + " (Promise/async)"); });
res._handled = true;
}
}
// 如果在执行过程中抛出错误，那么进行错误处理
catch (e) {
handleError(e, vm, info);
}
// 返回结果res
return res;
}
Vue源码学习(二十):$emit、$on实现原理的更多相关文章
- Vue源码学习二 ———— Vue原型对象包装
Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...
- Vue源码学习（零）：内部原理解析
本篇文章是在阅读<剖析 Vue.js 内部运行机制>小册子后总结所得,想要了解详细内容,请参考原文:https://juejin.im/book/5a36661851882538e2259 ...
- Vue源码学习(二）$mount() 后的做的事(1)
Vue实例初始化完成后,启动加载($mount)模块数据. (一)Vue$3.protype.$mount 标红的函数 compileToFunctions 过于复杂,主要是生 ...
- vue 源码学习二 实例初始化和挂载过程
vue 入口 从vue的构建过程可以知道,web环境下,入口文件在 src/platforms/web/entry-runtime-with-compiler.js(以Runtime + Compil ...
- Vue源码学习三 ———— Vue构造函数包装
Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...
- 手牵手，从零学习Vue源码 系列二（变化侦测篇）
系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 陆续更新中... 预计八月中旬更新完毕. 1 概述 Vue最大的特点之一就是数据驱动视 ...
- Vue源码学习1——Vue构造函数
Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...
- Vue源码分析(二) : Vue实例挂载
Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...
- Dubbo源码学习(二)
@Adaptive注解 在上一篇ExtensionLoader的博客中记录了,有两种扩展点,一种是普通的扩展实现,另一种就是自适应的扩展点,即@Adaptive注解的实现类. @Documented ...
- 最新 Vue 源码学习笔记
最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x ...
随机推荐
- jeecg-boot中导出excel冲突问题
jeecg-boot自带的库是autopoi,如果自定义导出excel引入poi,则需要POI版本要保持一致,否则会出现冲突的情况,导致这2个都用不了的情况. Autopoi底层用的是POI库,poi ...
- 开发环境需要同时安装2个nodejs版本
由于同时有vue2和vue3的项目开发情况,vue2项目的nodejs版本是12,vue3项目在node12版本下运行不了,要求最低14版本,因此要用nvm同时安装和控制2个版本. 安装步骤: 1.卸 ...
- lodash已死？Radash库方法介绍及源码解析 —— 异步方法篇
写在前面 tips:点赞 + 收藏 = 学会! 我们前面已经介绍了 radash 的相关信息和所有 Array 相关方法,详情可前往主页查看. 本篇我们继续介绍radash中异步相关的方法. 所有方法 ...
- IDEA文件夹注释插件TreeInfotip使用
目录 前景提要 环境整合 构建工具(参考工具部署方式) 下载插件 使用 前景提要 很多开源代码或者公司代码,因为层级比较多,所以查阅困难,发现一个TreeInfotip插件可以对这样的文件做注释 环境 ...
- 微信小程序订阅消息开发指南(java)
微信小程序订阅消息开发指南(java) 第一步 准备阶段 1.你得有一个小程序,并且认证了,个人的也行 2.开通订阅消息 小程序后台->功能->订阅消息 3.公共模板库选择一个模板 选择的 ...
- python 实现限流
固定窗口 固定窗口就是记录一个固定的时间窗口内的操作次数,操作次数超过阈值则进行限流. def fix_window_limit(redis_obj, period, max_count): &quo ...
- 微信小程序预约视频号直播
一.概述 微信小程序提供了可以唤起预约视频号直播弹窗的接口 reserveChannelsLive,该接口接收一个参数 noticeId,通过 getChannelsLiveNoticeInfo 接口 ...
- zabbix笔记_007 zabbix 分布式架构
1. zabbix 分布式架构[服务器数量较大的场景下使用] 现有架构: agent --> zabbix server proxy架构: agent --> zabbix proxy - ...
- Java爬虫-爬取疫苗批次信息
今年3月份开始,就接到通知, 根据<关于开展有关人群第二剂次脊髓灰质炎灭活疫苗补种工作的通知>国疾控卫免发[2024]1号文件要求,在2016年3月1日至2019年9月30日之间出生的儿童 ...
- Java中编译异常与运行异常的区别
编译期异常和运行期异常的区别 编译期异常和运行期异常的区别如下 异常处理要求不同:编译期异常(也称为检测异常checked Exception)要求在代码中显式地处理(使用try-catch或者thr ...