Vue.js 过滤API响应的最有效方法

我正在Vue+Vuex中构建一个股市概览应用程序，从API获取市场数据，然后通过websocket每隔x秒更新一次

现在我想有一个小部分，展示表现最好的市场

我想知道处理这个计算最有效的方法是什么

全伪码

1. 在vue组件中

computed: {
  getTopMarkets() {
     filterTopMarkets(this.$store.state.markets)
  }
}

2. 在vuex getter中

getters: {
  topMarkets() {
    return filterTopMarkets(state.markets)
  }
}

三, 我错过的其他可能性

上述两种方法在计算属性中计算与在vuex getter中计算是否有区别？一个比另一个快吗？比另一个好？为什么?

---

谢谢

Vuex getter和计算组件属性都是JavaScript getter

计算语言的长语法为：

computed: {
  yourComputed: {
    get: function() { return expression }
  }
}

相当于：

computed: {
  yourComputed() { return expression }
}

并且，您始终可以为以下对象定义setter：

computed: {
  yourComputed: {
    get: function() { return expression },
    set: function(value) {
      // dispatch an action or commit a mutation using value
    }
  }
}

这与Vue的反应性或变化检测机制相结合，意味着一旦它们运行一次，每次再次请求它们时，Vue都将使用先前计算的值——这就是为什么它们被称为计算值——而不实际重新运行代码，直到任何动态位引用发生变化。当引用发生更改时，getter（无论是Vuex getter还是computed属性）将重新运行，并通知其引用的所有位置，然后重新运行/重新呈现这些位置

这两种情况之间的唯一区别是：Vuex getter缓存在存储级别，计算道具缓存在组件级别

在性能和变化检测方面，它们在内部基本相同，使用相同的机制。 现在，如果您只在一个组件中使用它，建议不要使用Vuex，因为您的数据周围会有不必要的其他样板代码。 您最好在组件内部使用私有存储，或者在Vue.observable之前使用私有存储。这是一种创建基本存储的方法，而不需要Vuex存储附带的所有功能。 注意：上述替代方案允许您公开组件的私有存储。如果您不需要公开它，不用麻烦了：每个组件都已经有一个私有存储：数据函数公开给模板。您所需要做的就是预先声明反应性道具，从那时起，组件将对应用的更改作出反应

正如您的问题下面的评论中所述，这里的选择不应该基于代码性能，因为它基本上是相同的，而是基于开发和代码管理性能。 从长远来看，您的项目将从Vuex提供的订单/结构中受益多少：

你的应用程序会变得多复杂， 有多少开发人员正在/将要进行开发，项目的私有约定（如果有）定义得如何 您希望/需要数据管理和组件的解耦程度如何 您预计/预见该应用程序的迭代次数是多少？

---

项目代码库大小、数据结构复杂度、应用程序逻辑复杂度、应用程序迭代次数、开发人员数量越复杂，使用Vuex、IMHO的好处就越大。

请检查这一点，答案基本上是说你可以做一个或另一个。但是性能有区别吗？Vuex getter和computed属性都是getter。这意味着它们都是缓存的，只有当它们的动态依赖项发生变化时才会重新运行。区别在于您正在更改缓存它们的位置。如果您只在一个组件中使用它们，那么没有区别，但在这种情况下为什么要通过$store传递它们呢！？？。如果在多个组件中，请使用vuex getter。但实际上，在性能方面，这种差异实际上是不存在的。公平地说，在这种情况下，您不应该担心代码性能。您应该关心您或您的团队在维护和扩展结果代码方面的表现。这是游戏规则改变者，这是花费时间和金钱的地方，这是你做出决定的基础。投票结束这个问题的人是基于意见的：这不是基于意见的。computed和Vuex Getter内部使用同一机制的事实并非常识，也没有明确的文档记录，因此该问题是合法的，一旦得到回答，可能对未来提出同样问题的访问者有用。@Tony，将其删除。在这个问题上。当涉及到模板跟踪和数据之间的关系时，Vue中的变化检测机制仍然有点不清楚。我的意思是，我知道如何修复它，用新的扩展版本替换阵列，但我不确定为什么我需要这样做。在看过你的陈述后，我发现这很有用。它的信息量很大。