vue的Bus.$emit执行了有时候没触发的问题

Question

问题描述

项目中封装的Bus.js

import Vue from 'vue';
export default new Vue;

项目中的引用
import Bus from "@/common/Bus"

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本（请勿用截图）

Answer 1

没触发只有一个原因，因为$emit的时机早于$on，你在2个事件前各打个console就明了。
同步渲染的组件应该在$emit之前加个$nextTick就能确保送达，异步就没法了，只能视你自己情况调整

多解释几句，其实监听器并不是什么高深的技术

const Bus = {
  $on(eventName, eventHandler) {
    if (!this[eventName]) this[eventName] = [];
    this[eventName].push(eventHandler);
  },
  $emit(eventName, ...params) {
    if (this[eventName]) {
      for (const eventHandler of this[eventName]) {
        eventHandler(...params);
      }
    }
  },
};

基本原理就是这个上面简单对象，监听缓存，消息触发而已。
我们来调用

Bus.$on('msg', msg => {
  console.log(`$on1`, msg);
});

Bus.$emit('msg', 'msg1');

Bus.$on('msg', msg => {
  console.log(`$on2`, msg);
});

Bus.$emit('msg', 'msg2');

现在可以理解为什么$on2收不到msg1了吧