谁能告诉我如何加速我的 vuejs 应用程序？答案

【问题标题】：Can anyone tell how to speed up my vuejs app?谁能告诉我如何加速我的 vuejs 应用程序？
【发布时间】：2021-02-24 05:37:02
【问题描述】：

我是 vuejs 的菜鸟。我的这段代码让我的应用程序非常慢。

<div v-for="(attribute, i) in attributes" :key="i">
  <div>{{ AttributeClicked(attribute) }}</div>
</div>

这是函数：

AttributeClicked(attribute) {
  this.$store.commit("entities/Attribute/select", attribute.id);
}

这是突变：

mutations: {
  select(state, id) {
    let selection = Attribute.find(id);
    Attribute.update({
      where: (a) => a.selected,
      data: {
        selected: false
      }
    });
    if (selection !== null) {
      Attribute.update({
        where: id,
        data: {
          selected: true
        }
      })
    }
  },
}

这段代码的目的是制作一个像这样的网页https://www.tesla.com/models/design#overview 例如，我的目标是在页面加载时显示 Paint 属性下方的 5 个选项。

谁能告诉我如何加速这个应用程序？

【问题讨论】：

1) 这段代码的目的是什么？ 2）你能证明突变吗？
也许你想在用户点击这个属性时调用 AttributeClicked 函数？
{{ 属性 }}
@Radeanu，它就是这样工作的。但我想在不点击属性的情况下显示选项。
我不明白，如果你想显示来自商店的价值，请改用 getter。
在v-for中，属性从哪里来，mutation中的Attribute是从哪里定义的？

标签： vuex vuejs3

【解决方案1】：

您可能需要提供更多代码或信息才能完成您想做的事情，但是通过提供的代码，我可以看到几个问题。也许了解这些问题会帮助您找到您正在寻找的解决方案。

模板中有一个函数，这些函数可以很好地传递给@click 等事件句柄，但它们会对性能产生负面影响。每当您重新渲染模板时（当某些数据发生更改时会发生这种情况），它将重新运行这些函数。在这种情况下，您运行该函数的次数与拥有 attributes 的次数一样多，如果 AttributeClicked 方法导致反应性更新传播到此模板，您将陷入无限循环。
看起来您正在调用突变，而某个操作可能更合适。突变严格用于以同步方式更新状态。 select 突变不会改变状态，所以把它放在那里是完全错误的。尽管它可能会起作用，但 vuex 是一个工具，它不仅可以存储全局状态，而且还可以以一种自以为是的方式组织它。如果您要违背预期的设计，您可能会发现避免使用它会更容易。

我怀疑你可以在组件挂载期间执行一次AttributeClicked(attribute)。

【讨论】：