VUE.JS如何在计算属性中设置观察者

Question

如果我有一个看起来像这样的计算属性：

computed: {
  greeting() {
    const state = this.$store.state;
    if (state.name === 'Joe') {
      return 'Hey, Joe';
    } else {
      return 'Hello, ' + state.name;
    }
  }
}

VUE将在哪个对象上设置观察者？this.$store.state或state.name还是两者？问：

• 我想确保此VUE实例不会听取Vuex商店的所有和所有更改的 - 似乎可以在大型应用程序中降低性能。
• 我有业务要求通过道具设置一些计算的属性，而且我很难使它们变得反应。
• 我只是很好奇。

Answer 1

规定this.$store.state和this.$store.state.name属性是反应性的(应该是(，然后VUE将观察到这些属性的更改，并在这些属性变化时重新评估greeting。

未观察到其他属性。

这将导致greeting重新评估：

this.$store.state.name = 'foo';
this.$store.state = bar();

这将不是导致greeting被重新评估：

this.$store.state.foo = 'foo';
this.$store.state.a.b.c = 'bar';
this.$store.apple = 'pink lady';