Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。如果涉及更復(fù)雜的邏輯，你應(yīng)該使用計(jì)算屬性。

計(jì)算屬性是用來聲明式的描述一個(gè)值依賴了其它的值。當(dāng)你在模板里把數(shù)據(jù)綁定到一個(gè)計(jì)算屬性上時(shí)，Vue 會(huì)在其依賴的任何值導(dǎo)致該計(jì)算屬性改變時(shí)更新 DOM。這個(gè)功能非常強(qiáng)大，它可以讓你的代碼更加聲明式、數(shù)據(jù)驅(qū)動(dòng)并且易于維護(hù)。

通常情況下，使用計(jì)算屬性會(huì)比使用過程式的$watch回調(diào)更合適。比如下面的例子：

<div id="demo">{{fullName}}</div>
var vm = new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
})

上面的代碼是過程式的，并且比較笨重。對(duì)比一下計(jì)算屬性的版本：

var vm = new Vue({
el:'#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})

是不是感覺好多了？另外，你還可以為計(jì)算屬性提供一個(gè) setter：

computed: {
fullName: {
// getter
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]
}
}
}

計(jì)算屬性緩存

在 0.12.8 之前，計(jì)算屬性僅僅體現(xiàn)為一個(gè)取值的行為 —— 每次你訪問它的時(shí)候，getter 都會(huì)重新求值。在 0.12.8 中對(duì)此做了改進(jìn) —— 計(jì)算屬性的值會(huì)被緩存，只有在其某個(gè)反應(yīng)依賴改變才會(huì)重新計(jì)算。

設(shè)想我們有一個(gè)開銷很大的計(jì)算屬性 A，它需要循環(huán)一個(gè)大數(shù)組并且完成很多運(yùn)算。并且我們還有一個(gè)依賴 A 的計(jì)算屬性。如果沒有緩存，我們對(duì) A 的 getter 不必要的過度調(diào)用就會(huì)導(dǎo)致潛在的性能問題。而有了緩存，A 的值會(huì)被緩存起來，除非其依賴發(fā)生了變化，這樣訪問它再多次也不會(huì)導(dǎo)致大量的不必要運(yùn)算了。

然而，我們還是應(yīng)該理解什么會(huì)被視為“反應(yīng)式依賴”：

var vm = new Vue({
data: {
msg: 'hi'
},
computed: {
example: {
return Date.now() + this.msg
}
}
})

在上面的例子中，計(jì)算屬性依賴 vm.msg。因?yàn)檫@是一個(gè)在 Vue 實(shí)例中被觀察的數(shù)據(jù)屬性，那么它就被視為了一個(gè)反應(yīng)式依賴。無論何時(shí) vm.msg 改變，vm.example 的值都會(huì)被重新計(jì)算。
然而，Date.now()并不是反應(yīng)式依賴，因?yàn)樗鼪]有和 Vue 的數(shù)據(jù)觀察系統(tǒng)發(fā)生任何關(guān)系。因此，當(dāng)你在程序中訪問vm.example時(shí)，你會(huì)發(fā)現(xiàn)除非vm.msg觸發(fā)了一次重新計(jì)算，否則時(shí)間戳始終是相同的值。

有的時(shí)候你需要保留簡單獲取數(shù)據(jù)的模式，每次你訪問 vm.example 的時(shí)候都希望觸發(fā)重新計(jì)算。從 0.12.11 開始，你可以為一個(gè)特殊的計(jì)算屬性開關(guān)緩存支持：

computed: {
example: {
cache: false,
get: function () {
return Date.now() + this.msg
}
}
}

現(xiàn)在，每次你訪問 vm.example 的時(shí)候，時(shí)間戳都會(huì)及時(shí)更新。然而，要注意這只發(fā)生在 JavaScript 程序內(nèi)部訪問的時(shí)候，數(shù)據(jù)綁定還是依賴驅(qū)動(dòng)的。當(dāng)你在模板中綁定一個(gè) {{example}} 的計(jì)算屬性時(shí)，DOM 只會(huì)在反應(yīng)式依賴改變時(shí)才會(huì)更新。

以上所述是小編給大家介紹的Vue.js教程之計(jì)算屬性，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論