VueJS的$ emit和Watchers性能成本

Question

我构建了一个音乐应用程序（使用Vue和ToneJS），在该应用程序中，用户可以创建循环播放的曲目，并根据用户的选择以不同的方式进行更改。这利用了一套相当复杂的缩放计数器机制。建立了音乐功能之后，我正在研究“进度条”，该进度条显示了下一个过渡何时发生。

当前，我这样做的方式是计算所需的总步骤（每个注解是一个“步骤”），并将其与每个计数器的进度（在Vuex状态下）进行比较。就代码而言，这会花费很多精力。

更好的方法可能是每次执行步骤时都使用$ emit发送一个“滴答声”，带有进度条的组件将拾取该滴答声并将其与所需步骤进行比较。或者，在组件上使用观察程序可以检测到更改并发送报价。

但是，我已经在应用程序中遇到了一些计时性能问题，而计时对此至关重要。我是一个相对较新的开发人员，还不太了解性能。因此，我想知道的是，使用“ $emit观察者”有多“昂贵” ？由于它将被附加到应用程序的“马达”中，因此将不断对其进行调用。是否存在任何可能使齿轮变粘的危险？

Answer 1

首先，您需要了解它们的区别！

使用$emit中发出事件vue.js：

Vuejs正在使用发布-订阅模式来发出事件。在软件体系结构中，发布-订阅是一种消息传递模式，其中消息的发送者（称为发布者）不对消息进行编程，而是将消息直接发送给特定的接收者（称为订户）。。

让我们形象地看一下这种模式：

Object1将发出event fooEvent。其他对象可能会注册此事件的订阅者，因此无论何时fooEvent发出任何事件，都会调用该订阅者。

这是vuejs注册订户的方式（Github上的源代码）：

  Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
    const vm: Component = this
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        vm.$on(event[i], fn)
      }
    } else {
      (vm._events[event] || (vm._events[event] = [])).push(fn)
      // optimize hook:event cost by using a boolean flag marked at registration
      // instead of a hash lookup
      if (hookRE.test(event)) {
        vm._hasHookEvent = true
      }
    }

简而言之，它只是将它们存储在数组中vm._events：

(vm._events[event] || (vm._events[event] = [])).push(fn)

以及它如何调用订户（Github上的源代码）：

    let cbs = vm._events[event]
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs
      const args = toArray(arguments, 1)
      const info = `event handler for "${event}"`
      for (let i = 0, l = cbs.length; i < l; i++) {
        invokeWithErrorHandling(cbs[i], vm, args, vm, info)
      }

它遍历所有订户，并按注册顺序一一调用。

所以？它没有什么大不了的！

手表如何运作？：

好吧，如果我们要在源代码中讨论这是一个漫长的故事，但这是一个简短的故事：

每当您在Vuejs中标记要监视的属性时，它都会运行一个大代码来监视其更改并将其安排在调度程序中！SO vue明白通过集中和检查的变化，如果有变化或没有。

1. 这是怎么它创建了一个观察者（的每次您标记被关注的对象，而是创建一个新的Watcher为它的对象）。
2. run监视程序中的方法将由调度程序调用。
3. 以及如何运行它们。

所以？很重，不是吗？

因此，根据代码和我的个人经验总结出的结果和我的看法：

发出事件并不是一件沉重的事情，它比观察者要轻得多。