vue.js - vue watch handler 在没有实际更改的情况下被调用

Question

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

我现在有一个计算属性和一个 watch :

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期望其 layout 属性位于 certain 中非规范化格式。所以我们有一个执行 vuex -> vue-grid-layout 转换的 gridLayout getter。观察这个 gridLayout getter 即使生成的 gridLayout 实际上没有改变，但其他细节会发生变化，例如 vuex 存储中的名称和其他与 vue-grid-layout 对象键无关的键。

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

有没有办法让我的 watch 只在有实际变化时触发？实际上比较 JSON.stringify() 对我来说似乎效率低下，但随着我的项目的增长，我担心性能问题，因为我的 watch 可以执行昂贵的操作，我想确保我没有遗漏任何东西。

Answer 1

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

在你的例子中， react 依赖是 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 是响应式(Reactive)的

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