Vue的Computed中的setter的使用

背景说明

vue中的计算属性，是根据数据data的变化，有自动更新属性的效果。

但是有时候，我们需要改变计算属性，也就是在计算属性的基础上，给它进行赋值，这个时候，我们就用到了setter。

计算属性的getter和setter。

通常情况下，一个计算属性，通常默认有getter。基本写法如下：

computed: {
      choicedList: function () {
        return this.filterList.filter(item => {
          return item.isChoice;
        });
      }
}

如果你想给一个计算属性赋值，你必须给设置一个setter。基本语法如下：

filterList: {
 get () {
    let arr = this.sourceList.filter(item => {
      return item.name.indexOf(this.value) !== -1;
    });
    return arr;
  },
  set (val) {
    this.sourceList = this.sourceList.map(item => {
      let me = val.find(valItem => {
        return valItem.id === item.id;
      });
      if (me) {
        item.isChoice = me.isChoice;
      }
      return item;
    });
  }
}

这个filterList，就是一个计算属性，不过这个计算属性，变成一个包含getter和setter的对象，之前计算属性是通过方法来表示的。

如果一个计算属性没有setter，你对这个计算属性进行赋值的时候，会报错：
Computed property “XXX” was assigned to but it has no setter

如何理解setter？

getter和setter，个人认为，它们所做的事情有区别。

getter表示，这个计算属性的值，是怎么来的。

setter表示，当你给这个计算属性赋值的时候，发生了什么？setter这个函数的参数，是接受的值。

从人们的需求中，来理解setter，一般而言，我们给一个计算属性赋值，就想让这个计算属性的值变为我们进行接受的值。但是计算属性的值是怎么来的？在vue中它是监听data数据，进行动态变化的，所以我们如果直接给计算属性赋值其实是和vue相违背的，所以我们的setter，就只能根据接受的值，先改变data数据，再通过data数据的改变，让计算属性的值变为接受的值。

以上面的filterList计算属性为例，filterList是由sourceList决定的，所以在filterList的setter中，我们做的事情是把sourceList改变（根据给定的val），然后filterList自动就变为我们需要的值。