我有一个正在 vue 中监视的对象，目的是在检测到其中发生变化时执行操作。有些东西一直在触发它，但是当我将对象打印到控制台并将 oldVal 与 newVal 进行比较时，它们看起来是相同的。

只要查看记录到控制台的对象，在我看来并没有发现任何差异，所以我认为通过将它们字符串化并在文本比较工具中进行比较，我会发现差异，但对于像这样的代码，结果也是相同的:

watch: {
    CCompPrefs: function (newVal, oldVal) {
      console.log('CC changed: ', JSON.stringify(newVal), ' | was: ', JSON.stringify(oldVal))
    }
  },

虽然我不明白为什么如果对象中没有任何变化会触发监视，但我认为这样做是安全的:

watch: {
    CCompPrefs: function (newVal, oldVal) {
      if (newVal !== oldVal) {
        console.log('CC CHANGED, OLD VAL DIFFERENT')
      }
    }
  },

但是日志运行了，尽管我找不到明显的区别!

所以我通过这样做找到了一个可行的解决方案:

watch: {
    CCompPrefs: function (newVal, oldVal) {
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        console.log('CC CHANGED, OLD VAL DIFFERENT')
      }
    }
  },

但这仍然给我留下了一个困扰我的问题，即为什么首先会触发它。什么可能会发生变化，为什么？

补充信息

1. CCompPrefs 是通过以下方式计算的元素:

    computed: {
      CCompPrefs () {
        return this.$store.state[this.$attrs.useCase].filter(x => (x.show === true && x.enabled === true))
      },
    }

1. 几乎任何 Action 似乎都会触发这只 watch 。就像抛出一个模型窗口。
2. 使用 Vue devtools，我可以验证没有任何变更应用于 vuex 存储的任何部分

更新

现在我想知道上面计算值中的 this.$attrs.useCase 是否是罪魁祸首。我打开的模式在父容器中，也许它会切换该值的上下文并强制更新？现在正在研究...

更新 2

没有。 this.$attrs.useCase 不会改变。仍然很困惑，是什么触发了这个观察者？

最佳答案

我通过粗略地检查我的处理程序中的对象匹配来避免对未更改数据的冗余调用，如下所示:

data: () => ({
  lastDataString: '',
}),
itinerary: {
  handler: function(v) {
    // Avoid redundant calls
    let dataString = JSON.stringify(v)
    if (dataString === this.lastDataString){
      return
    }
    this.lastDataString = dataString

    // do stuff
  },
  deep: true,
},    

https://stackoverflow.com/questions/62588726/