摘要:

{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}
模板內(nèi)的表達(dá)式是非常便利的,但是他們實(shí)際上只用于簡(jiǎn)答的運(yùn)算;在模板上放有太多的邏輯會(huì)讓模板過(guò)重難以維護(hù);這就是對(duì)于任何復(fù)雜的邏輯,你都應(yīng)該使用計(jì)算屬性的原因;

接下來(lái)我們將computed屬性與methods watch屬性進(jìn)行一些簡(jiǎn)單的比較;

• 1:computed屬性;

經(jīng)過(guò)處理返回的數(shù)據(jù)值,只要源數(shù)據(jù)沒有發(fā)生改變,computed函數(shù)里面對(duì)相應(yīng)的數(shù)據(jù)就不會(huì)反生改變,相當(dāng)于緩存在本地;發(fā)生改變的時(shí)候,computed對(duì)應(yīng)數(shù)據(jù)的函數(shù)也會(huì)發(fā)生改變;
在這里我們聲明一個(gè)計(jì)算屬性reversedMessage;我們提供的函數(shù)將作為屬性vm.reb=versedMessage的getter.
console.log(vm.reversedMessage);
vm.message="Goodbye";
console.log(vm.reversedMessage);
你可以打開瀏覽器的控制臺(tái),自行修改;

HTML部分
<div id="example"> <p>origonal message:"{{message}}"</p> <p>Computed reversed message:"{{reversedMessage}}"</p> <p>{{now}}</p> </div>
js部分
var vm=new Vue({ el:"#example",//定義作用域 data:{ message:"hello"http://存放全局?jǐn)?shù)據(jù); }, computed:{ //a computed getter ---computed中具有g(shù)et屬性 reversedMessage:function(){ return this.message.split("").reverse().join(""); },//對(duì)應(yīng)上面的reversedMessage屬性 now:function(){ return Date.now(); }//Vue提供獲取時(shí)間的方法---對(duì)上面?zhèn)€的now變量; } });

• 2:computed屬性和methods屬性

你可能已經(jīng)注意到我們可以通過(guò)調(diào)用method來(lái)達(dá)到同樣的效果:
我們可以將同一個(gè)函數(shù)定義為一個(gè)method而不是一個(gè)計(jì)算屬性,對(duì)于最終的結(jié)果,兩種方式確實(shí)是相同的,
<strong>然而,計(jì)算屬性是基于他們的依賴就行緩存的,計(jì)算屬性只有在它相關(guān)的依賴發(fā)生改變時(shí)才會(huì)重新求值,這意味著只要message 還沒有發(fā)生改變,多次訪問reversedMessage計(jì)算屬性會(huì)立刻返回之前計(jì)劃算的結(jié)果,而不必再次執(zhí)行函數(shù).這也同樣意味著下面的計(jì)算屬性將不再更新,</strong>
相比而言,只要發(fā)生重新渲染,method調(diào)用總會(huì)執(zhí)行該函數(shù);
我們?yōu)槭裁葱枰彺?假設(shè)我們有一個(gè)性能開銷比較大的計(jì)劃屬性A,
它需要便利一個(gè)極大的數(shù)組和做很大量的計(jì)算,然后我們可能尤其他的計(jì)算屬性依賴A,
如果沒有緩存,我們將不可避免的多次執(zhí)行A的geteer,如果你不希望有緩存,請(qǐng)用methods代替;
因?yàn)镈ate.now()不是響應(yīng)式依賴;

HTML部分
<div id="example"> <p>Reversed message :"{{reversedMessage()}}"</p> </div>
js部分
methods:{ reversedMessage:function(){ return this.message.split("").reverse().join(''); } };

• 3:computed屬性與watch屬性;

vue確實(shí)提供了一種更通用的一種方式來(lái)觀察和響應(yīng)Vue實(shí)例上的數(shù)據(jù)變動(dòng):watch屬性;當(dāng)你有一些數(shù)據(jù)需要隨著其他數(shù)據(jù)進(jìn)行便動(dòng),你會(huì)很容易濫用watch--特別是你之前使用過(guò)AngularJS.然后,通常更好的想法就是使用computed屬性而不是命令式的watch回調(diào)

- 就直接寫兩這個(gè)JS部分代碼的比較吧;

通過(guò)watch實(shí)現(xiàn)對(duì)變量的監(jiān)控
var vm=new Vue({
el:"#demo",
data:{
    firstName:"Foo",
    lastName:"Bar",
    fullName:"foo Bar"
},
watch:{
    firstName:function(val){
        this.fullName=val+" "+this.lastName
    },
    lastName:function(val){
        this.fullName=this.firstName+" "+val
    }
}
});
但是如果要是使用computed來(lái)實(shí)現(xiàn)這個(gè)功能的話;寫作如下:
var vm=new Vue({
el:"#demo",
data:{
    firstName:"foo",
    lastName:"Bar",
    fullName:"foo Bar"
},
computed:{
    fullName:function(){
        get:function(){
            return this.firstName+" "+this.lastName;
        }   
    }
}
});
通過(guò)比較,computed的優(yōu)勢(shì)就出來(lái)了;

• 4:computed中的屬性;

  計(jì)算屬性默認(rèn)只有g(shù)etter不過(guò)在需要時(shí)也可以提供一個(gè)setter;

    var vm=new Vue({
    el:"#demo",
    data:{
    firstName:"foo",
    lastName:"Bar",
    fullName:"foo Bar"
  },
  computed:{
    fullName:function(){
        get:function(){
            return this.firstName+" "+this.lastName;
        },
        setter:function(){
            var names=newValue.split('');
            this.firstName=names[0];
            this.lastName=names[names.length-1]
        }
        
    }
  }
  });