vue计算属性的set和get方法

我们平时使用计算属性都是简写

computed：{
    computedFunction(){
        return "这是计算属性的简写"
    }
}

完整的计算属性中有一个set方法和get方法

data:{
  firstName:"xiu",
  lastName:"fan"
},
computed：{
    computedFunction(){
        set(){
            console.log("这是计算属性的set方法");
        },
        get(){
            return this.firstName + " " + this.lastName
        }

    }
}

调用：{{computedFunction}}
运行结果：xiu fan
可以看出计算属性的值就是get方法返回的值

set-->写：用来修改计算属性的值,当computedFunction的值发生改变时会自动回调set方法。
get-->读：返回计算属性的值

但一般情况下我们不希望别人能够修改计算属性的值，所以计算属性一般只有get方法，只读属性。

computed：{
    computedFunction(){
        get(){
            return this.firstName + " " + this.lastName
        }
    }
}

在去掉set方法后还有进一步的简化写法
简化前

computed：{
    computedFunction(){    这行代码去掉
        get(){ 将get修改为computedFunction
            return this.firstName + " " + this.lastName
        }
    }    这行代码去掉
}

简化后

computed：{
    computedFunction(){
        return this.firstName + " " + this.lastName
    }
}

可以看到简化后的方法就是我们平时用的方法，这相当于我们只写了计算属性的get方法