Add a name for all Vue instances.

[harish2704]

It will help while debugging / performance analysis.
For eg: it will help while monitoring emitted events.

an example event logger will look like this

import Vue from "vue";
import debounce from "lodash/debounce";

class Logger {
  constructor( timeout ) {
    this.logs = {};
    this.flush = debounce(this._flush.bind(this), timeout );
  }
  log(by, event, payload) {
    this.logs[new Date().toISOString()] = { by, event, payload };
    this.flush();
  }
  _flush() {
    console.table(this.logs);
    this.logs = {};
  }
}
const logger = new Logger(1000);

Vue.prototype.$emit_orig = Vue.prototype.$emit;
Vue.prototype.$emit = function(event, payload) {
  logger.log( this.$options.name, event, JSON.stringify(payload) );
  this.$emit_orig(event, payload);
};

[jarvelov]

This is an interesting suggestion approach. I've previously just added a console.log in the vfjsBusEventHandler function when I needed to troubleshoot events, but this would work for all events, even the ones emitted from the component. I could probably include this when using the development build if I make some changes to the webpack config. This will probably come in handy, thanks!

[harish2704]

@jarvelov : Yes this will work for all events and thus, we can see an consolidated table of all emitted events in this way.

In fact, I did this to check whether my PR #62 is introducing any additional overhead for the library or not.

( Initially I tried fixing unique ID issue by simply using math.random in all element. But Using the above logging, i quickly realized that it was causing unwanted change - validate iterations . Then I changed the logic as mentioned in the current PR )