Vue.js Computed属性被赋值但没有setter

在本文中，我们将介绍Vue.js中Computed属性被赋值但没有setter的情况以及如何解决该问题。

阅读更多：Vue.js 教程

什么是Computed属性？

在Vue.js中，我们可以使用Computed属性来根据其它属性的值进行计算得到一个新的属性值。Computed属性是通过在Vue实例中定义一个函数来创建的，这个函数会根据它所依赖的属性自动更新。Computed属性的值可以在模板中像普通属性一样使用。

一个典型的例子是计算一个学生成绩的等级。假设我们有一个名为score的属性，我们可以通过Computed属性grade将其转换为等级。下面是一个示例：

new Vue({
  data: {
    score: 85
  },
  computed: {
    grade: function() {
      if (this.score >= 90) {
        return 'A';
      } else if (this.score >= 80) {
        return 'B';
      } else if (this.score >= 70) {
        return 'C';
      } else if (this.score >= 60) {
        return 'D';
      } else {
        return 'F';
      }
    }
  }
});

在上面的例子中，我们根据score属性的值计算出了一个新的属性grade的值，它代表了学生的等级。

Computed属性的问题

当我们使用Computed属性时，有时会遇到一个问题：属性值被赋值但没有setter。这是因为Vue.js仅根据依赖的属性自动计算Computed属性的值，并没有提供一个默认的setter方法来更新Computed属性。换句话说，当我们尝试修改Computed属性的值时，Vue.js并不会抛出错误，但赋值操作会被忽略。

new Vue({
  data: {
    score: 85
  },
  computed: {
    grade: function() {
      if (this.score >= 90) {
        return 'A';
      } else if (this.score >= 80) {
        return 'B';
      } else if (this.score >= 70) {
        return 'C';
      } else if (this.score >= 60) {
        return 'D';
      } else {
        return 'F';
      }
    }
  }
});

...

// 尝试修改Computed属性的值，但是没有效果
this.grade = 'A+';

在上面的例子中，当我们尝试将grade属性的值修改为’A+’时，赋值操作会被忽略，grade属性的值仍然是根据score属性的计算结果而来。

如何解决Computed属性的问题

要解决Computed属性被赋值但没有setter的问题，我们可以使用带有getter和setter的计算属性。Vue.js允许我们在computed属性中使用对象的形式来定义计算属性，以提供自定义的getter和setter函数。

下面是一个使用带有getter和setter的计算属性的示例：

new Vue({
  data: {
    score: 85,
    _grade: ''
  },
  computed: {
    grade: {
      get: function() {
        return this._grade;
      },
      set: function(value) {
        this._grade = value;
      }
    }
  }
});

...

// 修改Computed属性的值
this.grade = 'A+';

在上面的例子中，我们定义了一个名为_grade的私有属性来存储实际的等级值。getter函数返回私有属性的值，而setter函数将新的值赋给私有属性。

通过使用带有getter和setter的计算属性，我们可以像普通属性一样修改Computed属性的值。

总结

在Vue.js中，Computed属性是根据依赖的属性自动计算得到的。然而，当Computed属性被赋值但没有setter时，赋值操作会被忽略。为了解决这个问题，我们可以使用带有getter和setter的计算属性来提供自定义的赋值行为。希望本文对理解Vue.js中Computed属性的赋值问题有所帮助。