调用 vue watch 处理程序而不进行实际更改

Question

在这个codepen 中有一个可以通过“incr”链接递增的计数器。

我现在有一个计算属性和一个手表：

computed: {
  test() {
    let unused = this.counter;
    return [42];
  }
},
watch: {
  test(val, old) {

    // Should I avoid firing when nothing actually changed
    // by implementiong my own poor-man's change detection?
    //
    // if (JSON.stringify(newVal) == JSON.stringify(oldVal))
    //   return;

    console.log(
      'test changed',
      val,
      old
    );
  }
}

也许是一个人为的例子，但实际上这是一个减少真实数据的计算（在 vuex getter 中），并且大多数情况下，即使某些数据发生变化，减少的数据也不会改变。

已编辑以添加更多细节：vuex store 中的数据已标准化。我们还使用了vue-grid-layout，它期望其layoutproperty 采用certain 非规范化格式。所以我们有一个 gridLayout getter 来执行 vuex -> vue-grid-layout 转换。观察这个 gridLayout getter 即使生成的 gridLayout 实际上没有改变，但其他细节发生了变化，例如 vuex 存储中的名称和其他与 vue-grid-layout 无关的对象键。

现在在上面的示例中，当this.counter 更改时，test 上的监视也会触发，即使 newVal 和 oldVal 是“相同的”。请注意，它们不是== 或===，而是与JSON.stringify(newVal) == JSON.stringify(oldVal) 中的“相同”。

有没有办法让我的watch 仅在发生实际更改时触发？实际上比较 JSON.stringify() 对我来说似乎效率低下，但我担心随着项目的增长会出现性能问题，因为我的手表可能会进行昂贵的操作，并且我想确保我不会遗漏任何东西。

Answer 1

根据 Vue.js 文档，计算属性会在响应式依赖项发生更改时重新评估。

在你的情况下，反应依赖是this.counter

您可以通过调用方法而不是计算属性来获得相同的结果。

只需更改您的组件架构：

data () {
  return: {
    counter: 0,
    obj: {},
    output: null
  }
},
watch: {
  counter(val, old) {
    // Alternatively you could remove your method and do something here if it is small
    this.test(val);
  },
  // Deep watcher
  obj: {
    handler: function (val, oldVal) {
        console.log(val);
        console.log(oldVal);
        this.test(val);
    },
    deep: true
},
  }
},
methods: {
  test() {
    let unused = this.counter;
    if (something changed)
      this.output = [42];
    }
  }
}

现在在您的模板（或其他计算属性）中，output 是反应式的

阅读更多：https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods