什么是計算屬性
我們己經(jīng)可以搭建出一個簡單的 Vue 應(yīng)用刃鳄，在模板中雙向綁定一些數(shù)據(jù)或表達(dá)式了。但是表達(dá)式如果過長慰照，或邏輯更為復(fù)雜時富腊，就會變得雕腫甚至難以閱讀和維護(hù)
如：
<div>
{{ text.split ( ’,’ ) ?reverse () . join (’,’)}}
</div>
這里的表達(dá)式包含 3 個操作蛆挫，并不是很清晰赃承，所以在遇到復(fù)雜的邏輯時應(yīng)該使用 計算屬性
所有的計算屬性都以函數(shù)的形式寫在 Vue 實(shí)例內(nèi)的 computed 選項(xiàng)內(nèi)妙黍，最終返回計算后的結(jié)果悴侵。
計算屬性用法
- 在一個計算屬性里可以完成各種復(fù)雜的邏輯，包括運(yùn)算拭嫁、函數(shù)調(diào)用等可免，只要最終返回一個結(jié)果就可以
- 計算屬性還可以依賴多個 Vue 實(shí)例的數(shù)據(jù)抓于，只要其中任一數(shù)據(jù)變化，計算屬性就會重新執(zhí)行浇借，視圖也會更新
例如：
var App2 = new Vue({
el: '#aaa',
data: {
msg: '我是App2的數(shù)據(jù)'
}
})
var App1 = new Vue({
el: '#shopp',
data: {
package1: [
{
name: 'iphone',
price: 6009,
count: 2
},{
name: '蘋果',
price: 999,
count: 1
}
],
package2: [
{
name: '橘子',
price: 4332,
count: 2
},{
name: '蘿卜',
price: 221,
count: 3
}
]
},
computed: {
prices: function(){
var total = 0
for( var i = 0; i < this.package1.length; i++){
total += this.package1[i].price*this.package1[i].count
}
for( var j = 0; j < this.package2.length; j++){
total += this.package2[j].price*this.package2[j].count
}
return total + '----' + App2.msg
}
}
})
getter和setter
每一個計算屬性都包含－個 getter 和一個 setter捉撮，我們上面的兩個示例都是計算屬性的默認(rèn)用法 ， 只是利用了 getter來讀取妇垢。在你需要時巾遭，也可以提供一個 setter 函數(shù) ， 當(dāng)手動修改計算屬性的值就像修改一個普通數(shù)據(jù)那樣時闯估，就會觸發(fā) setter函數(shù)灼舍，執(zhí)行一些自定義的操作 。
默認(rèn)用法 getter 舉例:
var App = new Vue({
el: '#names',
data: {
firstName: 'Liu',
lastName: 'bei'
},
computed: {
fullName: {
get: function(){
return this.firstName + this.lastName
}
}
})
//等同于
var App = new Vue({
el: '#names',
data: {
firstName: 'Liu',
lastName: 'bei'
},
computed: {
fullName: function(){
return this.firstName + this.lastName
}
}
})
setter 用法 舉例：
var App = new Vue({
el: '#naa',
data: {
firstName: 'Liu',
lastName: 'bei'
},
computed: {
fullName: {
get: function(){
return this.firstName + this.lastName
},
set: function(newValue){
var names = newValue.split(',')
this.firstName = names[0]
this.lastName = names[1]
}
}
}
})
計算屬性緩存
調(diào)用 methods 里的方法也可以與計算屬性起到同樣的作用
方法methods ： 如果是調(diào)用方法涨薪，只要頁面重新渲染骑素。方法就會重新執(zhí)行
計算屬性computed：不管渲染不渲染，只要計算屬性依賴的數(shù)據(jù)未發(fā)生變化刚夺，就永遠(yuǎn)不變
結(jié)論: 沒有使用計算屬性献丑，在 methods 里定義了一個方法實(shí)現(xiàn)了相同的效果，甚至該方法還可以接受參數(shù)侠姑，使用起來更靈活创橄。既然使用 methods就可以實(shí)現(xiàn)，那么為什么還需要計算屬性呢莽红？
原因就是:
計算屬性是基于它的依賴緩存的筐摘。 一個計算屬性所依賴的數(shù)據(jù)發(fā)生變化時，它才會重新取值船老，所以text 只要不改變咖熟，計算屬性也就不更新
何時使用: -----------使用computed還是 methods 取決于你是否需要緩存，當(dāng)遍歷大數(shù)組和做大量計算時柳畔，應(yīng)當(dāng)使用計算屬性馍管，除非你不希望得到緩存。
