vue提供了watch方法,用于監(jiān)聽實例內(nèi)data數(shù)據(jù)的變化。通常寫法是:
為濮陽等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及濮陽網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、濮陽網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求,就會得到認可,從而選擇與我們長期合作。這樣,我們也可以走得更遠!
new Vue({ data: { count: 10, blog:{ title:'my-blog', categories:[] } }, watch: { count: function (newval, oldVal) { console.log(`new: %s, old: %s`, newVal, oldVal); } } })
上述情況里data中的count屬性可以直接監(jiān)聽,但是如果需要監(jiān)聽的數(shù)據(jù)是對象內(nèi)的某一屬性值的變化,直接watch對象blog是檢測不到變化的,這是因為blog這個對象的指向并沒有發(fā)生改變。有幾個解決方法
1.深度監(jiān)測
new Vue({ data: { count: 10, blog:{ title:'my-blog', categories:[] } }, watch: { blog:{ handler(newVal,oldVal){ console.log(`new: ${newVal}, old: ${oldVal}`); }, deep:true } } })
里面的deep設(shè)為了true,這樣的話,如果修改了這個blog中的任何一個屬性,都會執(zhí)行handler這個方法。不過這樣會造成更多的性能開銷,尤其是對象里面屬性過多,結(jié)構(gòu)嵌套過深的時候。而且有時候我們就只想關(guān)心這個對象中的某個特定屬性,這個時候可以這樣
2.用字符串來表示對象的屬性調(diào)用
new Vue({ data: { count: 10, blog:{ title:'my-blog', categories:[] } }, watch: { 'blog.categories'(newVal, oldVal) { console.log(`new:${newVal}, old:${oldVal}`); }, } })
3.使用computed計算屬性
new Vue({ data: { count: 10, blog:{ title:'my-blog', categories:[] } }, computed: { categories() { return this.blog.categories; } }, watch: { categories(newVal, oldVal) { console.log(`new:${newVal}, old:${oldVal}`); }, }, })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
本文名稱:詳解Vue中watch對象內(nèi)屬性的方法
網(wǎng)頁地址:http://muchs.cn/article46/pisjhg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、做網(wǎng)站、網(wǎng)站維護、響應(yīng)式網(wǎng)站、域名注冊、ChatGPT
聲明:本網(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)