如何監聽 VueJS 中的所有自定義事件？

Question

在我的 VueJS 應用程序中，我有一個 Vue 實例，我將其用作在組件之間發送數據的事件總線。

就是這樣：

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

然后在我的組件中導入 EventBus 並使用EventBus.$emit()和EventBus.$on() 。

這種方法在這里解釋： https : //alligator.io/vuejs/global-event-bus/

我希望能夠做的是偵聽通過 EventBus 發送的任何事件。 如果我可以將一個偵聽器綁定到所有事件，我可以使用它來記錄日志或將數據饋送到我的開發環境的某個系統中，該系統會在進入 eventBus 時向我顯示所有數據，這將非常有用。

有沒有我遺漏的任何類型的vm.$listenToEverything()或某種方法來使這項工作？

Answer 1

如果您處於 ES6 環境中，則可以采用以下任一方法。 我通過評論來解釋。

通過繼承覆蓋

'use strict'

import Vue from 'vue'

export class EventBus extends Vue {
  // Register a custom callback as meddler that gets called upon each event emission.
  // It can be bound to $on as well. 
  $meddle (callback) {
    this.meddler = callback
  }

  // Override Vue's $emit to call the custom meddler callback upon each event emission.
  $emit (event, ...args) {
    if (this.meddler && typeof this.meddler.call === 'function') {
      this.meddler(event, ...args)
    }

    return super.$emit(event, ...args)
  }

  // We can also override $on() to listen to callbacks being registered.
}

export default new EventBus()

通過劫持覆蓋

或者使用“劫持”工廠類，以防您不希望包裝 Vue 事件總線。 邏輯基本相同，但是，在這種方法中，我們劫持，或者換句話說，猴子修補方法而不是直接覆蓋它們。

'use strict'

import Vue from 'vue'

class EventBusFactory {
  static create () {
    return this.hijack(new Vue())
  }

  static hijack (bus) {
    bus.$meddle = callback => {
      bus.meddler = callback
    }

    const orig$emit = bus.$emit
    bus.$emit = (event, ...args) => {
      if (bus.meddler && typeof bus.meddler.call === 'function') {
        bus.meddler(event, ...args)
      }

      orig$emit.call(bus, event, ...args)
    }

    return bus
  }
}

export default EventBusFactory.create()

Answer 2

VueJS 的作者提供了一個 用於監聽所有事件的hacky 解決方案：

var oldEmit = this.compiler.emitter.emit
this.compiler.emitter.emit = function () {
    console.log('got event: ' + arguments[0])
    oldEmit.apply(this, arguments)
}

另一個解決方案（據說也適用於 v1.0）：

const old_on = this.$on;
this.$on = (...args) => {
  // custom logic here like pushing to a callback array or something
  old_on.apply(this, args);
};