Vue中computed使用

get是基于其他的数据来获取到computed里定义的那个数据，类似于watch的handler，不写set，默认就是get，被computed的值会随着依赖的值的变化而变化

set是根据computed里定义的那个数据来改变其他的数据，即用computed处理后得到的值去做后续处理

computed实现了缓存，即如果依赖的值不变，那么不会再进行运算，而是取缓存中的值；这点与watch不同

示例

示例中改变firstName/lastName的值，fullName会发生变化；

          改变fullName的值，firstName/lastName会发生变化

<template>
    <div>
        <input v-model="firstName"></input>
        <input v-model="lastName"></input>
        <input v-model="fullName"></input>
    </div>
</template>

data(){
    return{
        firstName: '',
        lastName: '',
        fullName: ''
    }
}


computed:{

fullName: {       
                 // fullName依赖的值是firstName 和 lastName,也就是说两个值其中一个
                 // 的值发生变化时，get函数才会执行，返回最新的fullName
                get(){
                    return this.firstName + ' ' + this.lastName
                },
                // 用get中计算得到的最新值做后续处理
                set(val){
                    //val就是fullName3的最新属性值
                    console.log(val)
                    let names = val.split(' ');
                    console.log(names)
                    this.firstName = names[0];
                    this.lastName = names[1];
                }

}