performance - $emit 和 Watchers 的 VueJS 性能成本

Question

我构建了一个音乐应用程序(使用 Vue 和 ToneJS)，用户可以在其中创建循环轨道，这些轨道会根据用户的选择以各种方式变化。这利用了一组相当复杂的缩放计数器机制。构建了音乐功能后，我正在研究一个“进度条”，它会显示下一个过渡即将发生的时间。

目前，我这样做的方法是计算所需的总步数(每个音符是一个“步”)并将其与每个计数器的进度(在 Vuex 状态下)进行比较。就代码而言，这是很大的精神开销。

执行此操作的更好方法可能是使用 $emit 在每次前进一步时发出一个“滴答声”，带有进度条的组件会拾取它并与所需的步骤进行比较。或者，在组件上使用观察器可以检测到变化并发送一个滴答声。

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

Answer 1

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

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

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)
      }

它遍历所有订阅者并按注册顺序一一调用它们。

所以呢？花费不多!

watch 如何工作？

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

每当您在 Vuejs 中标记要监视的属性时，它都会运行一个大代码来监视其更改并在调度程序中安排它! SO vue 通过汇集并检查是否有变化来理解变化。

1. 这是 how它会创建一个观察者(每次您标记要观察的对象时，它都会为其创建一个新的 Watcher 对象)。
2. watcher 中的 run 方法将是 called由调度程序。
3. 它是怎么来的runs他们。

那么呢？它很重，不是吗？

---

所以根据代码和我的个人经验总结结果和我的看法:

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