javascript - 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 存储的任何和所有更改 - 这似乎会降低大型应用程序的性能。
• 我有一个业务需求，需要通过 props 设置一些计算属性，但我很难让它们使用react。
• 我只是很好奇。

Answer 1

如果 this.$store.state 和 this.$store.state.name 属性是 react 性的(它们应该是)，那么 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';