vue中的计算属性

一、计算属性：

1、computed中存储计算属性，要通过已有的属性计算得来，计算属性使用一个对象存储，包含get和set方法；

2、计算属性中的get和set方法中的this都是vm；

3、计算属性是一个属性，当使用插值语法调用它时，不可以加括号(因为它不是一个方法)

二、get方法

第一次调用之后会进行缓存

什么时候会调用get？

1、初次读取计算属性的时候；

2、当get中用到的数据发生改变的时候；

三、set方法

当手动修改计算属性时，调用set方法，例：vm.fullName="李-四"

<script>
    new Vue({
        el:"#root",
        data:{
            firstName:"li",
            lastName:"si"
        },
        computed:{
            fullName:{
                //当第一次调用fullName 或者 fullName引用的数据被修改时，调用get()函数
                get(){
                    return this.firstName+'-'+this.lastName
                },
                //当改变fullName计算属性时，调用set方法
                set(value){
                    const arr=value.split('-')
                    this.firstName=arr[0]
                    this.lastName=arr[1]
                }
            }
        }
    })
</script>

四、计算属性的简写

确定计算属性只需要调用get方法，而不需要调用set方法手动修改；

<script>
    new Vue({
        el:"#root",
        data:{
            firstName:"li",
            lastName:"si"
        },
        computed:{
            //简写
            fullName(){
                    return this.firstName+'-'+this.lastName
            }
        }
    })
</script>