vue中computed 和 watch有什么區(qū)別,很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
創(chuàng)新互聯(lián)服務項目包括柏鄉(xiāng)網(wǎng)站建設、柏鄉(xiāng)網(wǎng)站制作、柏鄉(xiāng)網(wǎng)頁制作以及柏鄉(xiāng)網(wǎng)絡營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,柏鄉(xiāng)網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前,我們服務的客戶以成都為中心已經(jīng)輻射到柏鄉(xiāng)省份的部分城市,未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任!
一、computed 和 watch 都可以觀察頁面的數(shù)據(jù)變化。當處理頁面的數(shù)據(jù)變化時,我們有時候很容易濫用watch。 而通常更好的辦法是使用computed屬性,而不是命令是的watch回調(diào)。
這里我直接引用vue官網(wǎng)的例子來說明:
html:
我們要實現(xiàn) 第三個表單的值 是第一個和第二個的拼接,并且在前倆表單數(shù)值變化時,第三個表單數(shù)值也在變化
<div id="myDiv"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <input type="text" v-model="fullName"> </div>
js: 用watch方法來實現(xiàn)
new Vue({ el: '#myDiv', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })
js: 利用computed 來寫
new Vue({ el:"#myDiv", data:{ firstName:"Den", lastName:"wang", }, computed:{ fullName:function(){ return this.firstName + " " +this.lastName; } } })
很容易看出 computed 在實現(xiàn)上邊的效果時,是更簡單的。
二 、 詳解 comouted 計算屬性。
在vue的 模板內(nèi)({{}})是可以寫一些簡單的js表達式的 ,很便利。但是如果在頁面中使用大量或是復雜的表達式去處理數(shù)據(jù),對頁面的維護會有很大的影響。這個時候就需要用到computed 計算屬性來處理復雜的邏輯運算。
1.優(yōu)點:
在數(shù)據(jù)未發(fā)生變化時,優(yōu)先讀取緩存。computed 計算屬性只有在相關(guān)的數(shù)據(jù)發(fā)生變化時才會改變要計算的屬性,當相關(guān)數(shù)據(jù)沒有變化是,它會讀取緩存。而不必想 motheds方法 和 watch 方法是的每次都去執(zhí)行函數(shù)。
2.setter 和 getter方法:(注意在vue中書寫時用set 和 get)
setter 方法在設置值是觸發(fā)。
getter 方法在獲取值時觸發(fā)。
computed:{ fullName:{ //這里用了es6書寫方法 set(){ alert("set"); }, get(){ alert("get"); return this.firstName + " " +this.lastName; }, } }
三 、watch 方法
雖然計算屬性在大多數(shù)情況下是非常適合的,但是在有些情況下我們需要自定義一個watcher,在數(shù)據(jù)變化時來執(zhí)行異步操作,這時watch是非常有用的。
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對創(chuàng)新互聯(lián)的支持。
標題名稱:vue中computed和watch有什么區(qū)別
網(wǎng)站URL:http://bm7419.com/article36/geiipg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設計、移動網(wǎng)站建設、App設計、企業(yè)網(wǎng)站制作、靜態(tài)網(wǎng)站、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)