今天小編給大家分享的是Vue中Computed和Watch的區(qū)別及其用法,相信很多人都不太了解,為了讓大家更加了解Computed和Watch,所以給大家總結(jié)了以下內(nèi)容,一起往下看吧。一定會(huì)有所收獲的哦。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比輝南網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式輝南網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋輝南地區(qū)。費(fèi)用合理售后完善,10余年實(shí)體公司更值得信賴。
一、 計(jì)算屬性(computed)
1.計(jì)算屬性是為了模板中的表達(dá)式簡(jiǎn)潔,易維護(hù),符合用于簡(jiǎn)單運(yùn)算的設(shè)計(jì)初衷。
例如:
<p id="app"> {{ myname.substring(0,1).toUpperCase() + myname.substring(1) }} </p>
運(yùn)算過于復(fù)雜,冗長(zhǎng),且不好維護(hù),因此我們對(duì)于復(fù)雜的運(yùn)算應(yīng)該 使用計(jì)算屬性的方式去書寫。
因此可改寫為:
<body> <div id="app"> {{ changewords }} // 渲染 不用寫() </div> </body> <script> var vm = new Vue({ el: "#app", data:{}, // 計(jì)算屬性 computed:{ changewords(){ return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1) } } }) </script>
總結(jié):
1.變量不在 data中定義,而是定義在computed中,寫法跟寫方法一樣,有返回值。函數(shù)名直接在頁(yè)面模板中渲染,不加小括號(hào) 。
2.根據(jù)傳入的變量的變化 進(jìn)行結(jié)果的更新。
3.計(jì)算屬性基于響應(yīng)式依賴進(jìn)行緩存。如其中的任意一個(gè)值未發(fā)生變化,它調(diào)用的就是上一次 計(jì)算緩存的數(shù)據(jù),因此提高了程序的性能。而methods中每調(diào)用一次就會(huì)重新計(jì)算 一次,為了進(jìn)行不必要的資源消耗,選擇用計(jì)算屬性。
計(jì)算屬性模糊查詢的例子:
<body> <div id="app"> <input type="text" v-model="mytext"> <ul> <li v-for="data in datalistcom" :key="data"> {{ data }} </li> </ul> </div> </body> <script> var vm = new Vue({ el: "#app", data:{ datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"], mytext:'' }, computed:{ datalistcom(){ return this.datalist.filter(item=>item.indexOf(this.mytext)>-1) } } }) </script>
二、監(jiān)聽屬性(watch)
上面說到計(jì)算屬性的時(shí)候 初始化的時(shí)候就可以被監(jiān)聽到并且計(jì)算 但是watch是發(fā)生改變的時(shí)候才會(huì)觸發(fā)。
當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動(dòng)而變動(dòng)時(shí),或者當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí),你可以使用 watch。
例子 :
<body> <div id="app"> <p>單價(jià):<input type="text" v-model="price"></p> <p>數(shù)量:<input type="text" v-model="number"></p> <p>計(jì)算金額:{{sum}}</p> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ price:100, number:1, sum:0 }, //監(jiān)聽某一個(gè)值或者狀態(tài)發(fā)生變化 變化就會(huì)觸發(fā)watch watch:{ // 監(jiān)聽的參數(shù)的名字要一致 price(){ console.log(this.price) if(this.price*this.number < 1000 && this.price*this.number > 0){ this.sum = this.price*this.number + 100 }else{ this.sum = this.price*this.number } }, number(){ console.log(this.price) if(this.price*this.number < 1000 && this.price*this.number > 0){ this.sum = this.price*this.number + 100 }else{ this.sum = this.price*this.number } } } }) </script>
計(jì)算屬性 和屬性監(jiān)聽的區(qū)別:
1.計(jì)算屬性變量在computed中定義,屬性監(jiān)聽在data中定義。
2.計(jì)算屬性是聲明式的描述一個(gè)值依賴了其他值,依賴的值改變后重新計(jì)算結(jié)果更新DOM。屬性監(jiān)聽的是定義的變量,當(dāng)定義的值發(fā)生變化時(shí),執(zhí)行相對(duì)應(yīng)的函數(shù)。
關(guān)于Vue中Computed和Watch的區(qū)別及其用法就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值,可以學(xué)以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。
分享題目:Vue中Computed和Watch的區(qū)別及其用法
轉(zhuǎn)載注明:http://bm7419.com/article46/iehhhg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、網(wǎng)站建設(shè)、虛擬主機(jī)、企業(yè)網(wǎng)站制作、用戶體驗(yàn)、品牌網(wǎng)站制作
聲明:本網(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í)需注明來源: 創(chuàng)新互聯(lián)