vue watch普通監(jiān)聽和深度監(jiān)聽實(shí)例詳解(數(shù)組和對(duì)象)
下面通過一段代碼給大家介紹vue watch的普通監(jiān)聽和深度監(jiān)聽，具體代碼如下所示：
var vm=new Vue({
data:{
num:1,
obj:{
name:'三兒',
age:'21',
sex:'女'
}
},
watch:{
num(val, oldVal){
//普通的watch監(jiān)聽
console.log(“num: “+val, oldVal);
},
obj:{
//深度監(jiān)聽，可監(jiān)聽到對(duì)象、數(shù)組的變化
handler(val, oldVal){
console.log(“obj.name: “+val.name, oldVal.name);
},
deep:true
}
}
})
vm.num=2
vm.obj.name='二兒'
下面單獨(dú)給大家介紹下vue-watch 深度監(jiān)聽
watch:{} 對(duì)象，可監(jiān)聽數(shù)據(jù)，數(shù)據(jù)發(fā)生變化， 處理函數(shù)
目的： watch雖可監(jiān)聽，但只是淺監(jiān)聽，只監(jiān)聽數(shù)據(jù)第一層或者第二層，
何為第二層？
let obj = {name: 'xx', child: {age: 11}};
child之后的值就為第二層或者深層
實(shí)現(xiàn)目標(biāo): 如果 要監(jiān)聽一個(gè)對(duì)象中的屬性，屬性最高也是第二層了，watch可能監(jiān)聽不到，
所有要使用深度監(jiān)聽：
實(shí)現(xiàn)代碼:
watch: {
' user.phone ' : {
handel:function() { //特別注意，不能用箭頭函數(shù)，箭頭函數(shù)，this指向全局
處理函數(shù)
},
deep: true //深度監(jiān)聽
}
}
總結(jié)
以上所述是小編給大家介紹的vue watch普通監(jiān)聽和深度監(jiān)聽實(shí)例詳解(數(shù)組和對(duì)象)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue使用多級(jí)彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決
這篇文章主要介紹了vue使用多級(jí)彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue3實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊的思路詳解
我們?cè)谧隽斜聿樵兊臅r(shí)候，會(huì)有很多查詢項(xiàng)，如何實(shí)現(xiàn)超過n行查詢項(xiàng)的時(shí)候自動(dòng)折疊起來呢？本文給大家分享vue3實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊的思路詳解，感興趣的朋友一起看看吧2022-06-06
Vue+ECharts+高德地圖API實(shí)現(xiàn)天氣預(yù)報(bào)數(shù)據(jù)可視化的教程
所謂數(shù)據(jù)可視化，我們可以理解為從宏觀角度來看一眼就能看出來整個(gè)數(shù)據(jù)的占比，走向，對(duì)于數(shù)據(jù)可視化，很多互聯(lián)網(wǎng)公司是很看重這一塊的，包括大廠，本就將給大家介紹如何通過Vue+ECharts+高德地圖API實(shí)現(xiàn)天氣預(yù)報(bào)數(shù)據(jù)可視化2023-06-06
vue3.x源碼剖析之?dāng)?shù)據(jù)響應(yīng)式的深入講解
這篇文章主要給大家介紹了關(guān)于vue3.x源碼剖析之?dāng)?shù)據(jù)響應(yīng)式的相關(guān)資料,在講解過程中,我們會(huì)對(duì)比Vue2.x的API特性,使用有哪些區(qū)別,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue?退出登錄?清除localStorage的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue-cli單頁應(yīng)用改成多頁應(yīng)用配置詳解
本篇文章主要介紹了vue-cli單頁應(yīng)用改成多頁應(yīng)用配置詳解，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了vue3如何實(shí)現(xiàn)掛載并使用axios，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
加入購(gòu)物車，是一個(gè)登錄后的用戶 才能進(jìn)行的操作，所以需要進(jìn)行鑒權(quán)判斷，判斷用戶token是否存在，這篇文章主要介紹了Vue加入購(gòu)物車判斷token添加登錄提示,需要的朋友可以參考下2023-11-11
鎖屏是指用戶暫時(shí)離開時(shí)點(diǎn)擊鎖屏,用戶無法跳轉(zhuǎn)到其他頁面,回來輸入密碼點(diǎn)擊解鎖,下面這篇文章主要給大家介紹了關(guān)于vue頁面鎖屏的完美解決方法,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue+vant實(shí)現(xiàn)圖片上傳添加水印功能,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2025-02-02