Vue的計(jì)算屬性

通常我們會(huì)在模板中綁定表達(dá)式，模板是用來描述視圖結(jié)構(gòu)的。如果模板的表達(dá)式存在過多的邏輯，就會(huì)變得臃腫不堪，可維護(hù)和可讀性就會(huì)較差，因此，為了簡化邏輯，當(dāng)某個(gè)屬性值依賴于其他屬性的值時(shí)，就可以使用計(jì)算屬性

成都創(chuàng)新互聯(lián)公司是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，專業(yè)領(lǐng)域包括成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、電商網(wǎng)站制作開發(fā)、小程序制作、微信營銷、系統(tǒng)平臺(tái)開發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

來看一個(gè)簡單的計(jì)算屬性的例子

<div id="example">
<input type="text" v-model="a"/>
<input type="text" v-model="b"/>
<br>
a={{ a }},b={{ b }},c={{ c }}
</div>
var vm=new Vue({
el:"#example",
data:{
a:'a',
b:'b'
},
computed:{
c:{
get:function(){
return this.a+this.b
},
set:function(newVal){
var names=newVal.splite('')
this.a=names[0]
this.b=names[1]
}
}
}
})

在這個(gè)例子中，我們在html中只需要插入a，b，c即可，而背后的計(jì)算過程交由computed：計(jì)算屬性來解決，當(dāng)a和b的值發(fā)生改變時(shí)，c的值也會(huì)改變，而當(dāng)我們的c發(fā)生改變時(shí)，相對于的a和b的值也會(huì)發(fā)生改變

這樣看來，計(jì)算屬性的使用還是很舒服的，但是如果再計(jì)算屬性方法中執(zhí)行大量的耗時(shí)操作，就可以會(huì)帶來一些性能問題，比如說：在計(jì)算屬性getter中循環(huán)一個(gè)大的數(shù)組以執(zhí)行很多操作，那么當(dāng)頻繁調(diào)用該計(jì)算屬性時(shí)，就會(huì)導(dǎo)致大量不必要的運(yùn)算

在早期的Vue中，只要讀取相對于的計(jì)算屬性，就要執(zhí)行一遍getter，但是在現(xiàn)在的Vue中，只有計(jì)算屬性依賴的屬性值發(fā)生改變才會(huì)執(zhí)行新的getter

這就要說到計(jì)算屬性和方法的區(qū)別：計(jì)算屬性的緩存，基于依賴進(jìn)行的緩存。即，當(dāng)程序所依賴的觀察數(shù)據(jù)屬性發(fā)生改變之后，才重新執(zhí)行g(shù)etter，否則有緩存可以節(jié)省性能

只是這樣也有一個(gè)問題，只有Vue實(shí)例中被觀察的數(shù)據(jù)屬性發(fā)生了改變時(shí)才會(huì)重新執(zhí)行g(shù)etter，但是有時(shí)候計(jì)算屬性依賴實(shí)時(shí)的非觀察數(shù)據(jù)屬性（例如最新的時(shí)間），所以Vue提供了緩存開關(guān)（關(guān)鍵詞：cache），當(dāng)我們將cache設(shè)為false時(shí)，每次執(zhí)行都要重新執(zhí)行一遍getter

文章題目：Vue的計(jì)算屬性
分享地址：http://bm7419.com/article22/geiijc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化、自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容