使用 Vue 事件或 Vuex 在组件之间传递数据（性能）？答案

【问题标题】：Using Vue events or Vuex to pass data between components (performance)?使用 Vue 事件或 Vuex 在组件之间传递数据（性能）？
【发布时间】：2020-10-12 10:38:34
【问题描述】：

我正在开发一个应用程序，该应用程序需要共享来自一个组件和另一个组件的信息，该组件使用该信息以 30-60fps 更新画布元素。我的目标是低端设备，所以性能很重要。

我目前正在使用 Vuex store/get 在两个组件之间传输信息。虽然它不会那么干净，但我意识到我也可以使用事件来向上和向下传递这些信息。

我很难找到关于 Vuex 的性能信息，所以在我重新编写我的代码的重要部分之前，我想我会在这里询问。

我不知道这是否重要，但我目前正在从 ES6 模块调用 getter。

【问题讨论】：

标签： javascript performance vue.js vuex

【解决方案1】：

你的应用很大吗？

我个人尽可能避免使用 Vuex。它的问题在于，如果你的 Store 变大，它就会变成一个大对象，随时为你提供。在每个页面、每个子页面、每个组件等上都会加载它。这意味着它会占用浏览器的内存。

有一个技巧是使用订阅和取消订阅 Vuex 方法来添加和删除 Vuex 模块，并且仅在必要时使用它们。但它们仍然是一个“全局”对象。

如果你真的需要使用 Vuex，请尽量保持它的小。不要把所有东西都放进去。

我没有对其进行测试，但我确信 props 和 $emits 会比 mutations 和 getters 运行得更快。

【讨论】：

我的商店很小，只存储一些视图变换矩阵。我需要在某个时候使用它，因为我希望在组件被销毁和恢复后平移/缩放保持一致。我可能只是让它在组件被销毁时存储数据，并使用事件将数据传递到其他任何地方。
@zachThePerson 很好。请记住，有时最好的性能并不是最好的代码? 有时代码的可读性、灵活性等比你可以获得的那几毫秒更重要。这都是相对的。
@zachThePerson 我会在文档中将您指向registerModule。如果部分代码仅在某些地方使用，您可以使用它? ⏩ vuex.vuejs.org/api/#registermodule 祝你好运！
感谢您的建议。实际上，使用事件结果非常干净，我可以感觉到性能差异（它使用鼠标移动，所以任何延迟都非常明显）。视口导航模块真的很小，所以我认为我不需要在这个上使用 register-module，但是我计划了更大的模块，所以这将非常有用
@zachThePerson 我很高兴能帮上忙?干杯！