didi={{didi}},family={{family}},didiFamily={{didiFamily}}
    

        
        
        

        didi={{didi}},family={{family}},didiFamily={{didiFamily}}
    

當(dāng)設(shè)置vm.didiFamily的值時，vm.didi和vm.family的值也會自動更新。

二、計算屬性緩存

計算屬性的特性的確很誘人，但是如果在計算屬性方法中執(zhí)行大量的耗時操作，則可能會帶來一些性能問題。例如，在計算屬性getter中循環(huán)一個大的數(shù)組以執(zhí)行很多操作，那么當(dāng)頻繁調(diào)用該計算屬性時，就會導(dǎo)致大量不必要的運(yùn)算。

在Vue.js 0.12.8版本之前，只要讀取相應(yīng)的計算屬性，對應(yīng)的getter就會重新執(zhí)行。而在Vue.js 0.12.8版本中，在這方面進(jìn)行了優(yōu)化，即只有計算屬性依賴的屬性值發(fā)生了改變時才會重新執(zhí)行g(shù)etter。

這樣也存在一個問題，就是只有Vue實(shí)例中被觀察的數(shù)據(jù)屬性發(fā)生了改變時才會重新執(zhí)行g(shù)etter。但是有時候計算屬性依賴實(shí)時3的非觀察數(shù)據(jù)屬性。代碼示例如下：

var vm = new Vue({
   data:{
       welcome:'welcome to join didiFamily'         
    },
   computed:{
        example:function(){
            return Date.now() + this.welcome    
         }       
     }  
})

我們需要在每次訪問example時都取得新的時間而不是緩存的時間。從Vue.js 0.12.11版本開始，默認(rèn)提供了緩存開關(guān)，在計算屬性對象中指定cache字段來控制是否開啟緩存。代碼示例如下：

var vm = new Vue({
   data:{
       welcome:'welcome to join didiFamily'         
    },
   computed:{
        example:function(){
            //關(guān)閉緩存，默認(rèn)為true
            cache:false,
            get:function(){
             return Date.now() + this.welcome               
             }      
         }       
     }  
})

設(shè)置cache為false關(guān)閉緩存之后，每次直接訪問vm.example時都會重新執(zhí)行g(shù)etter方法。

三、常見問題

在實(shí)際開發(fā)中使用計算屬性時，我們會遇到各種各樣的問題，以下是搜集到的一些常見問題以及解決方案。

計算屬性getter不執(zhí)行的場景

從前面我們了解到，當(dāng)計算屬性依賴的數(shù)據(jù)屬性發(fā)生改變時，計算屬性的getter方法就會執(zhí)行。但是在有些情況下，雖然依賴數(shù)據(jù)屬性發(fā)生了改變，但計算屬性的getter方法并不會執(zhí)行。但是在有些情況下，雖然依賴數(shù)據(jù)屬性發(fā)生了改變，但計算屬性的getter方法并不會執(zhí)行。

　　　　當(dāng)包含計算屬性的節(jié)點(diǎn)被移除并且模板中其他地方?jīng)]有再引用該屬性時，那么對應(yīng)的計算屬性的getter方法不會執(zhí)行。代碼示例如下：

        Toggle Show Total Price
        Total Price = {{totalPrice}}