<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('')
? ? }
? }
})
結(jié)果：
Original message: "Hello"
Computed reversed message: "olleH"
這里我們聲明了一個(gè)計(jì)算屬性?reversedMessage。我們提供的函數(shù)將用作屬性?vm.reversedMessage?的 getter 函數(shù)：
console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'
你可能已經(jīng)注意到我們可以通過在表達(dá)式中調(diào)用方法來達(dá)到同樣的效果：
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在組件中
methods: {
? reversedMessage: function () {
? ? return this.message.split('').reverse().join('')
? }
}
它們最主要的區(qū)別是計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，每次訪問的時(shí)候都是返回之前函數(shù)執(zhí)行的結(jié)果癞蚕，而methods方法需要每次調(diào)用
Vue 提供了一種更通用的方式來觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)：偵聽屬性。當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動(dòng)而變動(dòng)時(shí)辉哥，然而桦山，通常更好的做法是使用計(jì)算屬性而不是命令式的?watch回調(diào)。細(xì)想一下這個(gè)例子：
<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
? ? }
? }
})
偵聽器是偵聽到firstName和lastName變化是醋旦，fullName也發(fā)生變動(dòng)恒水，但是與計(jì)算屬性相比還是計(jì)算屬性更加簡潔
