将计算属性嵌套在一个对象中以进行代码维护 (Vue)

Question

就清洁逻辑和维护而言，以下场景的最佳做法是什么？

我的用例是有一个查询对象，它的参数是一堆text和之前查询的结果。

我最初认为代码结构如下（见伪代码）：

data() {
  return {
     queries : {
       q1 : { data: `${this.text} + ${this.formerResults}` }
       // q2, q3...
     },
     formerResults : ''
  }
},
methods : {
  makeQuery : function() {
    let vm = this;

    axios({ /* param of the query, data : this.queries.q1 */ })
     .then((response) => { vm.formerResults += /* add the results */ })
}

这个问题是formerResults 确实被附加了，但在下一个查询q1 中注入时结果为undefined。我不知道为什么，但通过将查询 q1 构造为计算属性解决了这个问题。

您能说出为什么在使用属性时逻辑会失败，并且可以使用计算属性吗？

computed: {
   q1() {
      return {
          // same as above
      }
   }
   // q2, q3 ...
}

并在我的方法中调用它：

axios({ /* param of the query, data : this.q1 */ });

可以看到text和formerResults这两个参数都通过了。

但是，我想将查询（q1、q2、q3..）分组在同一个对象 queries 下，就像在 data() 中一样：这是为了代码清晰，因为所有这些查询都是针对相同的url，我可能还有其他的。

但是尝试：

computed: {
    computedQueries : {
       q1() {
          return {
          // same as above
        }
       },
       // q2, q3 ...
    }
}

并在我的方法中这样称呼它：

axios({ /* param of the query, data : this.computedQueries.q1 */ })

会导致vue报错：

Error in v-on handler: "TypeError: Cannot read property 'q1' of undefined"

您能否说明如何将计算属性分组（或嵌套）到一个对象中？

我是否真的需要在我的示例中使用计算属性，以避免在下一个查询中未定义 formerResults？你能建议如何保持代码干净吗？

Answer 1

有几件事情需要考虑。

第一个问题：你能说出为什么在使用属性时逻辑会失败，并且可以使用计算属性吗？

data() 生命周期方法返回的属性在某种意义上是反应性的，每次更改它们时，Vue 都会触发新的渲染周期。但这并不意味着每个反应属性都会自动更新。你仍然需要更新它。所以，当你这样做时：

data() {
  return {
    queries : {
      q1 : {
        data: `${this.text} + ${this.formerResults}` 
      }
    },

    formerResults : ''
  }
},

Vue.js 尚未将这些反应属性添加到 this 实例。当然，此时this.formerResults 将是未定义的，this.queries.q1 会将其视为未定义。

为什么以及何时使用计算属性？

你是正确的使用计算属性。如果您需要自动建立依赖关系并且您不需要为某些属性设置setter（即自己设置值），那么您必须使用计算属性。

在您的情况下，查询 - q1、q2 等必须在 formerResults 更改时自动更新。为此，您将使用计算属性。

如何将计算属性分组（或嵌套）到一个对象中？

您声明计算属性的方式是错误的，因此您会看到错误。 嵌套计算属性本身没有概念，但您可以创建一个单个复杂对象，它是多次计算的结果，并生成包含所有数据的单个值你需要：

computed: {
  queries: function () {
    return {
      q1: { data: `${this.text} + ${this.formerResults}`},
      q2: { /* Some other stuff */},
      //... q3, q4, etc.
    };
  }
}

每次 text 和 formerResults 被代码的某些部分更改时，您的 queries 对象将被重新计算。这样不会有任何性能损失。

我真的需要在我的示例中使用计算属性，以避免在下一个查询中未定义 formerResults 吗？你能建议如何保持代码干净吗？

使用计算属性是实现反应性的最简洁方式。在我看来，其他所有选择都很麻烦。例如，您可以使用 watchers 执行相同的操作，但它并不干净。

data() {
  return {
    queries: {
      q1: { data: '' },
      // q2, q3, ...
    },
    formerResults: ''
  }
},
watch: {
  formerResults: function() {
    this.queries = {
      q1: { data: `${this.text} + ${this.formerResults}` }
      // q2, q3, ...
    };
  },
  text: function() {
    this.queries = {
      q1: { data: `${this.text} + ${this.formerResults}` }
      // q2, q3, ...
    };
  }
}