計(jì)算屬性和觀察者
計(jì)算屬性基礎(chǔ)例子
你可以像綁定普通屬性一樣在模板中綁定計(jì)算屬性掰派。Vue 知道?vm.reversedMessage?依賴于?vm.message功炮，因此當(dāng)?vm.message?發(fā)生改變時(shí)汉买，所有依賴?vm.reversedMessage的綁定也會更新。而且最妙的是我們已經(jīng)以聲明的方式創(chuàng)建了這種依賴關(guān)系：計(jì)算屬性的 getter 函數(shù)是沒有副作用 (side effect) 的歌径，這使它更易于測試和理解陕赃。
<div id="example">
? ? <p>{{message}}</p>
? ? <p>{{reversedMessage}}</p>
</div>
var vm = new Vue({
? ? el:"#example",
? ? data:{
? ? ? ? message:"Hello"
? ? },
? ? computed:{
? ? ? ? reversedMessage:function(){
? ? ? ? ? ? return this.message.split('').reverse().join('')
? ? ? ? }
? ? }
? ? methods: {
? ? ? ? ? ? reversedMessage: function () {
? ? ? ? ? ? ? ? ?return this.message.split('').reverse().join('')
? ? ? ? ? ? } }
})
我們可以將同一函數(shù)定義為一個(gè)方法而不是一個(gè)計(jì)算屬性。兩種方式的最終結(jié)果確實(shí)是完全相同的瓜挽。然而盹廷，不同的是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會重新求值久橙。這就意味著只要?message?還沒有發(fā)生改變俄占，多次訪問?reversedMessage?計(jì)算屬性會立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)淆衷。
我們?yōu)槭裁葱枰彺娓组考僭O(shè)我們有一個(gè)性能開銷比較大的的計(jì)算屬性?A，它需要遍歷一個(gè)巨大的數(shù)組并做大量的計(jì)算祝拯。然后我們可能有其他的計(jì)算屬性依賴于?A?甚带。如果沒有緩存，我們將不可避免的多次執(zhí)行?A?的 getter鹿驼！如果你不希望有緩存欲低，請用方法來替代。
#計(jì)算屬性vs偵聽屬性
Vue提供了一種更通用的方式來觀察和響應(yīng)Vue實(shí)例上的數(shù)據(jù)變動:偵聽屬性.當(dāng)有些數(shù)據(jù)需要隨著其他數(shù)據(jù)變動而變動時(shí),別濫用watch,更好的做法是使用計(jì)算屬性而不是命令式的watch回調(diào).
<div id="demo">{{fullName}}</div>
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
? ? ? ? }
? ? ?}
})
//與計(jì)算屬性的版本進(jìn)行比較
var vm = new Vue({
? ? ?el:"#demo",
? ? ?data:{
? ? ? ? ? ?firstName:"Foo",
? ? ? ? ? lastName:"Bar"
? ? },
? ? computed:{
? ? ? ? ?fullName:function(){
? ? ? ? ? ? ? ?return this.firstName + "" + this.lastName
}
}
})
