Performance types of Eventbus in Vuejs

Question

In some projects I am performing a maintenance, there is the use of Global eventbus.

In the case, usually had seen it as follows:

Event-bus.js

import Vue from 'vue';

const EventBus = new Vue();
export default EventBus;

However, I came across another implementation of Eventbus:

Event-bus.js

import Vue from 'Vue'
const bus = new Vue()

export default function install (Vue) {
  Object.defineProperties(Vue.prototype, {
    $bus: {
      get() {
        return bus
      }
    }
  })
}

main.js

import EventBus from './event-bus'
Vue.use(EventBus)

I usually use Eventbus, and I understand the way I should use it, but I don’t really understand the way it operates, how it works.

I would like a clear explanation of the way in which Eventbus operates (both ways if possible), and which of the two implementations would be the most "correct" and/or perfomatic.

Answer 1

Like the EventBus opera?

Communication between components

Any and all communication between components is available in the Vue and you can find them giving a console.log(this) inside the component, that’s where Props and EventBus operate, they simply execute methods in the instance you could do yourself, but in a much more organized way and risk saying that often even unnecessary...

Eventbus

Before understanding how it works it is necessary to know if you really need to use, when it is necessary to execute methods on other components from an action in the central component, we can use the EventBus, it automatically operates on any component that is associated with the component, be it $parent or $children, it’s like a global spread, who wants to listen listen listen who doesn’t want to stay quiet kk...

In practice

Let’s think and a structure like this

src

• App.
• Propag.Vue
• Event-bus.js
• main.js

Main rendered the App.Vue

Event.bus.js

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

App.

<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 the EventBus and the simple method is marked with a comment identifying, note that the EventBus is more verbose and complicated, in the long run will help you? in my opinion helps only in the centralization of events, ie, you would not need to worry in pointing out the component that will receive the event, just care it, I particularly do not use, because it helps me a lot the practicality and the organization of simple communication.

Regarding the second way of doing, I have no knowledge to speak...

Code running: https://codesandbox.io/s/mm58vw8px8

Answer 2

As for the Eventbus mechanism, in both cases they are equal, what changes is the way in which you access the same.

The second case, which is set a plugin that will injetar à $bus at the prototype of Vue, that is, the variable $bus will be available at every instance of Vue.

But this form of injetar the EventBus, it seems to me a reinvention of the wheel, since I don’t see a great advantage in doing this, rather than 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 the $bus, the ideal would be to do it using a 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.

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 be used by several projects, there is no reason to use it as a Plugin. Then the following piece of code should 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.

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

Vue.mixin(EventBus)