vue中的计算属性,是根据数据data的变化,有自动更新属性的效果。
但是有时候,我们需要改变计算属性,也就是在计算属性的基础上,给它进行赋值,这个时候,我们就用到了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
getter和setter,个人认为,它们所做的事情有区别。
getter表示,这个计算属性的值,是怎么来的。
setter表示,当你给这个计算属性赋值的时候,发生了什么?setter这个函数的参数,是接受的值。
从人们的需求中,来理解setter,一般而言,我们给一个计算属性赋值,就想让这个计算属性的值变为我们进行接受的值。但是计算属性的值是怎么来的?在vue中它是监听data数据,进行动态变化的,所以我们如果直接给计算属性赋值其实是和vue相违背的,所以我们的setter,就只能根据接受的值,先改变data数据,再通过data数据的改变,让计算属性的值变为接受的值。
以上面的filterList计算属性为例,filterList是由sourceList决定的,所以在filterList的setter中,我们做的事情是把sourceList改变(根据给定的val),然后filterList自动就变为我们需要的值。