本篇內(nèi)容主要講解“Vue中計(jì)算屬性和偵聽器怎么使用”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue中計(jì)算屬性和偵聽器怎么使用”吧!
在Vue中通常我們會(huì)在模板綁定表達(dá)式,模板是用來(lái)描述視圖結(jié)構(gòu)的。如果模板中的表達(dá)式存在過(guò)多的邏輯性語(yǔ)句,那么整個(gè)模板就會(huì)變得特別的臃腫,可讀性和維護(hù)性將會(huì)降低,因此為了簡(jiǎn)化邏輯,我們會(huì)使用計(jì)算屬性
基本用法:
computed:{ A:function(){ return B+C } }
如果學(xué)過(guò)面向?qū)ο笳Z(yǔ)言,應(yīng)該知道面向?qū)ο蟮臉?biāo)準(zhǔn)之一封裝,需要getter也需要setter,而上面的寫法,實(shí)際上只寫了getter而沒(méi)有寫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ì)算屬性能做的用方法來(lái)也可以做
也就是
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)閉緩存
再來(lái)看他的緩存方式,計(jì)算屬性是具有依賴性的,依賴data中的數(shù)據(jù),如果數(shù)據(jù)改變,相應(yīng)的就會(huì)改變,這就要說(shuō)到另外一個(gè)東西:偵聽器
什么是偵聽器呢?偵聽器用來(lái)偵聽數(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ì)算屬性來(lái)說(shuō),是很容易重復(fù)的,所以Vue也建議,通常更好的做法是使用計(jì)算屬性而不是watch
到此,相信大家對(duì)“Vue中計(jì)算屬性和偵聽器怎么使用”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
網(wǎng)站標(biāo)題:Vue中計(jì)算屬性和偵聽器怎么使用-創(chuàng)新互聯(lián)
路徑分享:http://chinadenli.net/article32/dcjjpc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、網(wǎng)站內(nèi)鏈、商城網(wǎng)站、微信公眾號(hào)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
網(wǎng)頁(yè)設(shè)計(jì)公司知識(shí)