舉例:html
<div id='example'>
<p>Original message: "{{message}}"</p>
<p>Computed reversed message: "{{reversedMessage}}"</p>
</div>
複製代碼
let vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
複製代碼
使用方法實現一樣的效果:數組
<p>Reversed message: "{{reversedMessage()}}"</p>
複製代碼
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('');
}
}
複製代碼
咱們能夠將同一函數定義爲一個方法而不是一個計算屬性。兩種方式的最終結果確實是徹底相同的。 不一樣的是計算屬性是基於它們的依賴進行緩存。計算屬性只有在它的相關依賴發生改變時纔會從新求值。緩存
爲何須要緩存?
假設咱們有一個性能開銷比較大的的計算屬性 A,它須要遍歷一個巨大的數組並作大量的計算。而後咱們可能有其餘的計算屬性依賴於 A 。若是沒有緩存,咱們將不可避免的屢次執行 A 的 getter!若是你不但願有緩存,請用方法來替代。異步
偵聽屬性函數
<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
}
}
})
複製代碼
上面的代碼是命令式的。若是用computed改造:性能
var vm = new Vue({
el:'#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + this.lastName;
}
}
})
複製代碼
計算屬性默認只有getter,不過在你須要時你也能夠提供一個setter:this
computed: {
fullName: {
get: function () {
return this.firstName + this.lastName;
},
set: function (newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
複製代碼
這時運行vm.fullName = 'John Doe'
時,setter會被調用,vm.firstName
和vm.lastName
也會被相應的更新。spa
雖然計算屬性在大多數狀況下更合適,但有時也須要一個自定義的偵聽器。watch
選項提供了一個更通用的方法,來響應數據的變化。當須要在數據變化時執行異步或開銷較大的操做時,這個方式是最有用的。code