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];
                }

}