时间戳

首页 > 解决方案 > 当对象没有（可识别的）更改时触发 Vue watch

vue.js - 当对象没有（可识别的）更改时触发 Vue watch

问题描述

我有一个在 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. 几乎任何动作似乎都会触发这款手表。就像抛出模型窗口一样。
  2. 使用 Vue devtools，我可以验证 vuex 存储的任何部分都没有应用任何突变

更新

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

更新2

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

标签： vue.js

解决方案

推荐阅读