計算屬性
計算屬性是基于它們的響應(yīng)式依賴進行緩存的。只在相關(guān)響應(yīng)式依賴發(fā)生改變時它們才會重新求值。
緩存的重要性：當我們有一個性能開銷很大的計算屬性A時，他需要遍歷一個巨大的數(shù)組并做大量計算。當有其他計算屬性也依賴A時炭庙，如果不緩存A，我們將不可避免的多次執(zhí)行 A 的 getter方法煌寇，這樣十分耗費性能焕蹄。
計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: {
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]
}
}
}
})
偵聽器
當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時阀溶，watch偵聽器是最有用的腻脏。當值第一次綁定的時候，不會執(zhí)行監(jiān)聽函數(shù)银锻，只有值發(fā)生改變才會執(zhí)行永品。
watch: {
city：{
//如果我們需要在最初綁定值的時候也執(zhí)行函數(shù)，則就需要用到immediate屬性
immediate: true,
//普通的watch方法無法監(jiān)聽到對象內(nèi)部屬性的改變击纬，只有data中的數(shù)據(jù)才能夠監(jiān)聽到變化鼎姐，此時就需要deep屬性對對象進行深度監(jiān)聽
deep: true,
handler(newVal, oldVal) {
// do somethings
},
},
// 當對象屬性較多時，每個屬性值的變化都會執(zhí)行handler更振。如果只需要監(jiān)聽對象中的一個屬性值炕桨，則可以做以下優(yōu)化：使用字符串的形式監(jiān)聽對象屬性
'city.name': {
handler(newName, oldName) {
// ...
},
}
}
計算屬性 vs 偵聽器
watch：一個值變化了，我要做那些事肯腕，適合一個值影響多個值的情景献宫。
computed：一個值由其他的值得來的，這些值變了我也要變实撒，適合多個值影響一個值的場景姊途。
計算屬性有緩存性涉瘾，計算所得的值沒有變化不會重復(fù)執(zhí)行，監(jiān)聽器提供更通用的方法捷兰，適合執(zhí)行異步操作或者開銷大的情況立叛。
一個數(shù)據(jù)需要經(jīng)過復(fù)雜計算就用 computed。一個數(shù)據(jù)需要被監(jiān)聽并且對數(shù)據(jù)做一些操作就使用 watch寂殉。
