Javascript 如何在不触发反应性的情况下计算Vuex状态差

我有单击后更改Vuex状态的组件列表。 我想呈现两个Vuex状态值之间的差异：单击处理程序调度的操作之前和之后

可能是这样的：

{{{difference}

导出默认值{
方法：{
差异（）{
让oldValue=this.$store.getters.getValue（）；
这是$store.dispatch（一些动作）；
让newValue=this.$store.getters.getValue（）；
此.$store.dispatch（撤消某些操作）；
返回newValue-oldValue；
}
clickItem（）{
这是$store.dispatch（一些动作）；
}
}
}

这是未经测试的，但我的想法是让

difference

从IIFE（立即调用的函数表达式）返回它的功能，然后添加一个标志，指示它是否已被调度

const difference = (function() {
  let dispatched;

  return function() {
    if (dispatched) {
      dispatched = false;
      return;
    }

    let oldValue = this.$store.getters.getValue();
    this.$store.dispatch(SOME_ACTION);
    dispatched = true;

    let newValue = this.$store.getters.getValue();
    this.$store.dispatch(UNDO_SOME_CATION);
    return newValue-oldValue;
  }
})()

---

这是一个可行的想法，我已经尝试过了。但是，反应性会造成很大的性能损失。如果您有大量的组件。Visual、console.time和DevTool performance选项卡，那么速度会非常慢。渲染包含约60个组件的“页面”所需的时间从毫秒（无差异计算）增加到约3秒。您的代码没有问题。这是我复杂的存储、组件组织和vuex反应性的问题。您可以使用无限循环逻辑解决问题。我想，我应该改变我的问题，澄清问题不仅仅是无限循环。