計算屬性
模板內(nèi)使用計算屬性是很方便的，設(shè)計的目的只是為了簡單運算蔬啡。在模板中放入太多的邏輯會讓模板過重且難以維護唁毒。所以，對于任何復(fù)雜邏輯星爪，你都應(yīng)當(dāng)使用計算屬性。
<!-- 復(fù)雜運算 -->
<div>{{message.split('').reverse().join('')}}</div>
<!-- 計算屬性代替復(fù)雜運算 -->
<div>{{reverseMessage}}</div>
computed: {
<!-- 計算屬性的getter -->
reverseMessage: function () {
return this.message.split('').reverse().join('');
}
}
Computed VS Methods
我們可以使用方法達到和計算屬性同樣的效果
區(qū)別在于計算屬性具有緩存粉私，只有當(dāng)計算屬性所依賴的屬性發(fā)生改變時顽腾，才會重新去計算，而方法每次都會去重新計算結(jié)果诺核。
<div>{{reverseMessage}}</div>
<div>{{_reverseMessage()}}</div>
computed: {
reverseMessage: function () {
return this.message.split('').reverse().join('');
}
},
methods: {
_reverseMessage: function () {
return this.message.split('').reverse().join('');
}
}
Watch VS Computed
- watch
<div>{{fullName}}</div>
data: {
firstName: "Foo",
lastName: "Bar",
fullName: ""
}
watch: {
firstName: function (val) {
this.fullName = val + " " + this.lastName;
},
lastName: function (val) {
this.fullName = this.firstName + " " + val;
}
}
- computed
<div>{{fullName}}</div>
data: {
firstName: "Foo",
lastName: "Bar",
fullName: ""
}
computed: {
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
watch是觀察某一個屬性的變化抄肖，重新計算屬性值。computed是通過所依賴的屬性的變化重新計算屬性值窖杀。
大部分情況下watch和computed幾乎沒有差別漓摩。但如果要在數(shù)據(jù)變化的同時進行異步操作或者是比較大的開銷，那么watch為最佳選擇入客。
計算屬性的Setter
計算屬性默認只有g(shù)et管毙，在需要的時候也可以設(shè)置set方法
fullName: {
get: function () {
return this.firstName + " " + this.lastName;
},
set: function (val) {
this.firstName = val.split(' ')[0];
this.lastName = val.split(' ')[1];
}
}
