vue3去掉了$on、$off后，使用mitt第三方库替代eventBus的原理。

on，on，on，off 和 $once 实例方法已被移除，应用实例不再实现事件触发接口。
官方文档推荐mitt这个小库来替代。
看了一下mitt的源码，有种豁然开朗的赶脚。
贴在这里。

源码是用ts写的，这里贴了一个翻译后的，对着看，比较好。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button id="btn">点击按钮</button><script>window.onload = function () {function mitt(all) {all = all || new Map();return {// 事件键值对映射对象all,/*** 注册一个命名的事件处理* @param type 事件名，官方表示事件名如是 *，用来标记为通用事件，调用任何事件，都会触发命名为 * 的事件* @param handler 事件处理函数*/on(type, handler) {// 根据type去查找事件const handlers = all.get(type);// 如果找到有相同的事件，则继续添加，Array.prototype.push 返回值为添加后的新长度，const added = handlers && handlers.push(handler);// 如果已添加了type事件，则不再执行set操作if (!added) {all.set(type, [handler]); // 注意此处值是数组类型，可以添加多个相同的事件}},/*** 移除指定的事件处理* @param type 事件名，和第二个参数一起用来移除指定的事件，* @param handler 事件处理函数*/off(type, handler) {// 根据type去查找事件const handlers = all.get(type);// 如果找到则进行删除操作if (handlers) {// 这里用了个骚操作，其实就是找到了，则删除(多个相同的只会删除找到的第一个)，没找到则不会对原数组有任何影响handlers.splice(handlers.indexOf(handler) >>> 0, 1);}},/*** 触发所有 type 事件，如果有type为 * 的事件，则最后会执行。* @param type 事件名* @param evt 传递给处理函数的参数*/emit(type, evt) {// 找到type的事件循环执行(all.get(type) || []).slice().map((handler) => { handler(evt); });// 然后找到所有为*的事件，循环执行(all.get('*') || []).slice().map((handler) => { handler(type, evt); });}};}const m1 = mitt()m1.on('hi', () => {console.log('我是m1')})var btn = document.getElementById("btn")btn.addEventListener("click", function () {console.log('111')m1.emit('hi');})}</script>
</body></html>

vue3去掉了$on、$off后，使用mitt第三方库替代eventBus的原理。相关推荐

python更新版本会丢失库吗_Python卸载后,随之的第三方库会消失吗
2019-01-31 回答 python拥有一个强大的标准库.python语言的核心只包含数字.字符串.列表.字典.文件等常见类型和函数,而由python标准库提供了系统管理.网络通信.文本处理.数据 ...
去掉字符串后面所有的0 去掉字符串前面或后面的0；
https://blog.csdn.net/weixin_43844810/article/details/94577879 去掉字符串前面或后面的0: 养猫还是养狗? 2019-07-03 17:1 ...
去掉“搜一搜”后，让“查看新贴”等按钮居中
去掉"搜一搜"后,原来与"搜一搜"同行的"查看新贴"."热门话题"."发帖排行"."用户列 ...
excel 求去掉最高分最低分后的平均值
在显示结果的单元格输入下面的公式=TRIMMEAN(A2:F2,1/5*2) 其中5是数值(裁判打分)的个数. 2是需要去除极值的个数. 1/5*2便是数据点集中所要消除的极值比例. 下面是去掉4个极 ...
vue3 ref，reactive请求后的赋值问题以及解决方法
vue3 ref,reactive请求后的赋值问题以及解决方法开发的过程中,我们一定会进行接口的对接,将响应的结果赋值给我们页面上需要展示或者操作的变量,在vue3中,我们可能会稍微的有点不适应 ...
去掉最大值和最小值后求平均值的公式
去掉最大值和最小值后求平均值的公式在一些竞赛活动中,经常看到裁判现场打分的情况,为了保证竞赛公平,通常在所有裁判给出的分数中去掉一个或几个最高和最低分,然后用剩余的分数取平均得到参赛选手 ...
uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
问题: 1.uniapp去掉顶部导航栏后计算手机安全区距离 2.模糊背景的局部清晰 3.去除overflow: auto:带来的滚动条(没有滚动条也可以滚动) 4.监测页面滑动使用的方法 5.data ...
html中如何去除编号点,如何去掉WORD自动编号后的小点。
自动编号与后2113面语句有很大5261空格,于是调整文4102字位置(1653选择所需要改版动的部分,点"格式权"-"项目符号和编号"-点你需要的编号类型-& ...
C语言编程：青年歌手参加歌曲大奖赛,有10个评委打分(满分10分),去掉最高最低分后，试编程求选手的平均得分
C语言编程:青年歌手参加歌曲大奖赛,有10个评委打分(满分10分),去掉最高最低分后,试编程求选手的平均得分: 代码如下: #include<stdio.h> void main() {i ...

vue3去掉了$on、$off后，使用mitt第三方库替代eventBus的原理。

vue3去掉了$on、$off后，使用mitt第三方库替代eventBus的原理。相关推荐

最新文章

热门文章