Performance of EventBus in Vuejs

As for the EventBus mechanism, in both cases they are the same, what changes is how to access it.

The second case, which defines a plugin that will injetar to $bus to prototype of Vue , that is, $bus will be available in every instance of Vue . / p>

But this form of injetar o EventBus , seems like a reinvention of the wheel, since I do not see a big advantage in doing this, instead of simply doing the following in the plugin.

import Vue from 'Vue'

const bus = new Vue()
const plugin = {
  install (Vue) {
    Vue.prototype.$bus = bus
  }
}

export default plugin

As for injecting $bus , it would be best to do so using Mixin .

mixins / event-bus.js

import Vue from 'Vue'
const bus = new Vue()
const mixin = {
  beforeCreate () {
    this.$bus = bus
  }
}

export default mixin

plugins / event-bus.js

import Vue from 'Vue'
import EventBus from '../mixins/event-bus.js'

const plugin = {
  install (Vue) {
    Vue.mixin(EventBus)
  }
}

export default plugin

App.vue

import Vue from 'Vue'
import EventBus from './plugins/event-bus.js'

Vue.use(EventBus)

Another point, a Plugin is interesting if you wanted to reuse some component, so unless this EventBus is used by several projects, there is no reason to use it as a Plugin. So the following code snippet should already be enough to inject your EventBus

mixins / event-bus.js

import Vue from 'Vue'
const bus = new Vue()
const mixin = {
  beforeCreate () {
    this.$bus = bus
  }
}

export default mixin

App.vue

import Vue from 'Vue'
import EventBus from '../mixins/event-bus.js'

Vue.mixin(EventBus)

  

How does EventBus operate?

Communication between components

Any communication between components is available in the instance of Vue and you can find them by giving console.log(this) within the component, that is where Props and EventBus operate, they simply execute methods on the instance that you yourself could do, but in a much more organized and risky way to say that often even unnecessary ...

EventBus

Before you understand how it works, you need to know if you really need to use it, when it is necessary to execute methods on other components from an action in the central component, we can use EventBus , it automatically operates on any component that is associated to the component, is $parent or $children , it is like a global spread, who wants to hear hears who does not want to be quiet kk ...

In practice

Let's think and a break like this

src

• App.vue
• Propag.vue
• event-bus.js
• main.js

Main will render App.vue

event.bus.js

import Vue from "vue";
export const EventBus = new Vue();

App.vue

<template>
<div>
  <div class="pleeease-click-me" @click="emitGlobalClickEvent()">Click para emitir</div>
  <Propag ref="prop"></Propag>
</div>
</template>

<script>
import { EventBus } from "./event-bus.js"; // EventBus
import Propag from "./Propag.vue";

export default {
  components: { Propag },
  data() {
    return {
      clickCount: 0
    };
  },

  methods: {
    emitGlobalClickEvent() {
      this.clickCount++;

      this.$children[0].somaClickComp(this.clickCount); // Simples

      EventBus.$emit("somaClick", this.clickCount); // EventBus
    }
  }
};
</script>

<style>
div.pleeease-click-me {
  width: 130px;
  height: 20px;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
</style>

Propag.vue

<template>
  <div class="other">
    Atualizado pelo EventBus: {{clicks}} <br>
    Atualizado pelo componente : {{compClick}}
  </div>
</template>

<script>

import { EventBus } from "./event-bus.js"; // EventBus

export default {
  created() { // EventBus
    EventBus.$on("somaClick", this.somaClick);
  }, 
  data() {
    return {
      clicks: 0,
      compClick: 0
    };
  },
  methods: {
    somaClick(item) { // EventBus
      this.clicks = item;
    },
    somaClickComp(item) { // Simples
      this.compClick = item;
    }
  }
};
</script>

<style>
.other {
  margin-top: 30px;
  width: 250px;
  height: 40px;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
</style>

In the parts where I use EventBus and the simple method is demarcated with a comment identifying, notice that EventBus is more verbose and complicated in the long run will help you? in my opinion it only helps to centralize the events, that is, you do not have to worry about pointing the component that will receive the event, just import it, I particularly do not use, because it helps me a lot the practicality and organization of simple communication .

Regarding the second way of doing, I do not know how to speak ...

Rolling code: link