[vue]计算属性computed

[vue]计算属性computed

props: [
    "groups",
],
data() {
    return {
        visible: false,
        size: 'small',
    };
},
computed:{//添加对应的 map
    "mapGroup":function(){
        let list=[];
        console.log(this.size);
        this.groups.map(item=>{
            list[item.value]=item.label;
        })
        return list;
    }
}

注意
对应的属性使用的是function()而不是（）=>箭头函数，这里使用箭头函数，会无法识别data或者props中的值，
并且mapGroup会在第一次调用的时候计算该属性，在之后的应用中，只要涉及到的数据没有发生变化mapGroup不会被重新计算

响应式数据的复杂逻辑，都应该使用计算属性

当方法和计算属性都可以达成相同的目的，使用计算属性的优势：

• 计算属性只在相关响应式依赖发生改变时它们才会重新求值，计算属性会立即返回之前的计算结果，而不必再次执行函数

• 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数