模板內(nèi)的表達(dá)式過多會導(dǎo)致模板過于繁重，這時(shí)候可以采取計(jì)算屬性蛤奥。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計(jì)算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實(shí)例
return this.message.split('').reverse().join('')
}
}
})
計(jì)算屬性和一般的屬性一樣引用晒夹，看上去是一個(gè)方法裆馒，帶有返回值姊氓，它和一般屬性寫在data中不同，寫在【computed中】喷好。
在這里你可以進(jìn)行復(fù)雜的操作翔横，最終返回需要的返回值，讓頁面變得更加干凈梗搅，他等同于小程序的wxs禾唁。
計(jì)算屬性的緩存
計(jì)算屬性會處理data中的一些數(shù)據(jù)，然后返回處理后的結(jié)果无切，它看上去和專門定義一個(gè)方法處理一樣荡短，但是其實(shí)并不相同，因?yàn)樗怯芯彺娴摹?/p>
如上例中的this.message订雾，只要這個(gè)message的值不改變肢预，那么這個(gè)屬性返回的永遠(yuǎn)是上一次計(jì)算結(jié)果的緩存值，大大節(jié)省的計(jì)算量洼哎。
但也就意味著烫映，如果它處理的數(shù)據(jù)源并不是data中的可以被響應(yīng)的數(shù)據(jù)，那么它將永不會更新數(shù)據(jù)噩峦，如：
computed: {
now: function () {
return Date.now()
}
}
因?yàn)镈ate.now()的值的來源并不是data锭沟，所以它永遠(yuǎn)不會更新數(shù)據(jù)。
計(jì)算屬性vs偵聽屬性
看上去和偵聽屬性（watch）差不多识补，同樣是值的改變會觸發(fā)族淮，但是watch容易濫用，例如返回給頁面的是data中的name和age兩個(gè)屬性凭涂，使用watch就必須對兩者同時(shí)監(jiān)聽祝辣，參數(shù)越多，偵聽的值就越多切油，而計(jì)算屬性則不需要蝙斜，書寫一次就足夠了。
計(jì)算屬性的setter
計(jì)算屬性不僅僅只有g(shù)etter澎胡，也可以設(shè)置setter孕荠，綁定了model 的計(jì)算屬性可以反過來改變數(shù)據(jù)源。
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
偵聽器
當(dāng)數(shù)據(jù)變化時(shí)攻谁，需要執(zhí)行異步操作或其他情況稚伍，可以使用偵聽器來檢測事件，從而進(jìn)行下一步流程戚宦。
例如个曙，檢測到用戶輸入姓名后，通過watch將姓名ajax到后臺受楼，然后判斷該用戶名是否可用困檩。明顯這種情況不能使用計(jì)算屬性祠挫。
