Vue的Computed中的setter的使用
背景说明vue中的计算属性,是根据数据data的变化,有自动更新属性的效果。但是有时候,我们需要改变计算属性,也就是在计算属性的基础上,给它进行赋值,这个时候,我们就用到了setter。计算属性的getter和setter。通常情况下,一个计算属性,通常默认有getter。基本写法如下:computed: {choicedList: function () {...
背景说明
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自动就变为我们需要的值。
更多推荐
所有评论(0)