您好,登錄后才能下訂單哦!
計(jì)算屬性
模板內(nèi)的表達(dá)式非常便利,但是設(shè)計(jì)它們的初衷是用于簡單運(yùn)算的。在模板中放入太多的邏輯會讓模板過重且難以維護(hù)。例如:
<div id="example"> {{ message.split('').reverse().join('') }} </div>
在這個(gè)地方,模板不再是簡單的聲明式邏輯。你必須看一段時(shí)間才能意識到,這里是想要顯示變量 message 的翻轉(zhuǎn)字符串。當(dāng)你想要在模板中多次引用此處的翻轉(zhuǎn)字符串時(shí),就會更加難以處理。
所以,對于任何復(fù)雜邏輯,你都應(yīng)當(dāng)使用計(jì)算屬性。
基礎(chǔ)例子
<div id="app"> {{fullName}} </div> var vm = new Vue({ el: '#app', data: { firstName: "王", lastName: "小智", age: 28 }, // 計(jì)算屬性 computed: { fullName: function () { console.log("計(jì)算了一次") return this.firstName + " " + this.lastName } } })
結(jié)果:
王小智
然后我們通過瀏覽器改變age屬性的值,讓頁面重新渲染:
大家可以看到,我們改變了age值計(jì)算屬性的方法沒有被調(diào)用,那如果計(jì)算屬性的值發(fā)生了改變,如lastName或者firstName改變,打印結(jié)果又會怎么樣呢?
大家可以看到,當(dāng)他依賴的發(fā)生變化的時(shí)候,計(jì)算屬性會重新計(jì)算一次。
計(jì)算屬性緩存 vs 方法
你可能已經(jīng)注意到我們可以通過在表達(dá)式中調(diào)用方法來達(dá)到同樣的效果:
<p>Reversed message: "{{ fullName() }}"</p> // 在組件中 methods: { fullName: function () { console.log("計(jì)算了一次") return this.firstName + " " + this.lastName; } }
結(jié)果:
王小智
同樣參照上面,我們通過瀏覽器改變age屬性的值,讓頁面重新渲染:
可以看出,我們頁面只要重新渲染,方法都會執(zhí)行一次,而計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會重新求值。
我們?yōu)槭裁葱枰彺??假設(shè)我們有一個(gè)性能開銷比較大的的計(jì)算屬性 A,它需要遍歷一個(gè)巨大的數(shù)組并做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性依賴于A 。如果沒有緩存,我們將不可避免的多次執(zhí)行 A 的 getter!如果你不希望有緩存,請用方法來替代。
計(jì)算屬性 vs 偵聽屬性
你可能已經(jīng)注意到我們還可以通過偵聽屬性達(dá)到同樣的效果:
var vm = new Vue({ el: '#app', data: { firstName: "王", lastName: "小智", age: 28, fullName }, // 計(jì)算屬性 watch: { firstName: function () { console.log("計(jì)算了一次"); this.fullNmae = this.firstName + this.lastName; }, lastName: function () { console.log("計(jì)算了一次") this.fullNmae = this.firstName + this.lastName; } } })
結(jié)果:
王小智
同樣參照上面,我們通過瀏覽器改變age屬性的值,讓頁面重新渲染:
大家可以看到,和fullname不相關(guān)的改變,fullName沒有變化,跟計(jì)算屬性類似,會有緩存,只有在它的相關(guān)依賴發(fā)生改變時(shí)才會重新求值,將它與計(jì)算屬性的版本進(jìn)行比較,好得多了,不是嗎?
當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動(dòng)而變動(dòng)時(shí),你很容易濫用 watch——特別是如果你之前使用過
AngularJS。然而,通常更好的做法是使用計(jì)算屬性而不是命令式的 watch 回調(diào)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。