Question

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

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

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

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

Answer 1

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

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

Vuejs使用发布－订阅模式来发出事件。 In software architecture, publish–subscribe is a messaging pattern where senders of messages, called publishers, do not program the messages to be sent directly to specific receivers, called subscribers.。

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

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

vuejs如何注册订户（source code on 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)

这是如何呼叫订户（source-code on 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通过汇总并检查是否有更改来了解更改。

这是how，它创建一个观察者（每次您标记要监视的对象时，它都会为其创建一个新的Watcher对象）。
计划程序将called用作监视程序中的run方法。
以及如何runs他们。

是吗？很重吧？

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

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

VueJS的$ emit和Watchers性能成本

1 个答案: