本篇內(nèi)容主要講解“Vue中計(jì)算屬性和偵聽器怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue中計(jì)算屬性和偵聽器怎么使用”吧!

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),婺城企業(yè)網(wǎng)站建設(shè),婺城品牌網(wǎng)站建設(shè),網(wǎng)站定制,婺城網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,婺城網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

在Vue中通常我們會(huì)在模板綁定表達(dá)式，模板是用來描述視圖結(jié)構(gòu)的。如果模板中的表達(dá)式存在過多的邏輯性語句，那么整個(gè)模板就會(huì)變得特別的臃腫，可讀性和維護(hù)性將會(huì)降低，因此為了簡(jiǎn)化邏輯，我們會(huì)使用計(jì)算屬性

基本用法：

computed:{
A:function(){
return B+C
}
}

如果學(xué)過面向?qū)ο笳Z言，應(yīng)該知道面向?qū)ο蟮臉?biāo)準(zhǔn)之一封裝，需要getter也需要setter，而上面的寫法，實(shí)際上只寫了getter而沒有寫setter

那么我們就可以換種寫法

computed:{
A:{
get:function(){
return B+C
}
set:function(newVal){
var names=newVal.splir(' ')
this.B=names[0]
this.C=names[1]
}
}
}

這樣寫就明了很多了

這個(gè)時(shí)候，可能會(huì)奇怪，似乎計(jì)算屬性能做的用方法來也可以做

也就是

methods: {
  A: function () {
    return B+C
  }
}

實(shí)際上，計(jì)算屬性是基于他們的響應(yīng)式依賴進(jìn)行緩存的，而方法不存在緩存

而計(jì)算屬性的緩存也有它的壞處，當(dāng)重復(fù)調(diào)用時(shí)，就會(huì)發(fā)生一些多余的步驟，導(dǎo)致大量不必要的運(yùn)算

這時(shí)候就需要

cache：false

關(guān)閉緩存

再來看他的緩存方式，計(jì)算屬性是具有依賴性的，依賴data中的數(shù)據(jù)，如果數(shù)據(jù)改變，相應(yīng)的就會(huì)改變，這就要說到另外一個(gè)東西：偵聽器
什么是偵聽器呢？偵聽器用來偵聽數(shù)據(jù)的變化，如果數(shù)據(jù)發(fā)生變化就會(huì)觸發(fā)綁定的方法
偵聽器又有自己的應(yīng)用場(chǎng)景：數(shù)據(jù)變化執(zhí)行時(shí)異步或開銷比較大的操作
基本使用：

watch:{
firstN:function(val){
this.A=val+this.C
}
}

偵聽器，相比于計(jì)算屬性來說，是很容易重復(fù)的，所以Vue也建議，通常更好的做法是使用計(jì)算屬性而不是watch

到此，相信大家對(duì)“Vue中計(jì)算屬性和偵聽器怎么使用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文標(biāo)題：Vue中計(jì)算屬性和偵聽器怎么使用-創(chuàng)新互聯(lián)
分享URL：http://weahome.cn/article/dcjjpc.html