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

最新推荐文章于 2024-03-20 09:31:52 发布

一键写代码

最新推荐文章于 2024-03-20 09:31:52 发布

阅读量2.4k

点赞数 1

分类专栏：移动端 vue 前端技术积累

本文链接：https://blog.csdn.net/qq_42991509/article/details/117229259

版权

前端技术积累同时被 3 个专栏收录

160 篇文章 9 订阅

订阅专栏

vue

89 篇文章 7 订阅

订阅专栏

移动端

35 篇文章 1 订阅

订阅专栏

$o n ，$ 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>

一键写代码

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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.
复制链接

扫一扫