vue watch監(jiān)聽對象及對應(yīng)值的變化詳解
更新時間：2018年02月24日 15:11:05 作者：金大光
下面小編就為大家分享一篇vue watch監(jiān)聽對象及對應(yīng)值的變化詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
var vm=new Vue({
data:{
a:1,
b:{
c:1
}
},
watch:{
a(val, oldVal){//普通的watch監(jiān)聽
console.log("a: "+val, oldVal);
},
b:{//深度監(jiān)聽，可監(jiān)聽到對象、數(shù)組的變化
handler(val, oldVal){
console.log("b.c: "+val.c, oldVal.c);//但是這兩個值打印出來卻都是一樣的
},
deep:true
}
}
})
vm.a=2
vm.b.c=2
a是一個普通的值，當(dāng)a的值變化時會被監(jiān)聽到，b是一個對象，不能直接像a那么寫，需要深度監(jiān)聽才能捕捉到，但是當(dāng)我想去捕捉b對象中某一個值的變化時卻發(fā)現(xiàn)，打印出來的兩個值是不一樣的，如圖：
這樣就只能知道對象發(fā)生變化卻不知道具體哪個值發(fā)生了變化，如果想監(jiān)聽對象某一個值得變化可以利用計算屬性computed
var vm=new Vue({
data:{
b:{
c:1
}
},
watch:{
newValue(val, oldVal){
console.log("b.c: "+val, oldVal);
}
},
computed: {
newValue() {
return this.b.c
}
}
})
vm.b.c=2
用watch去監(jiān)聽computed計算過的值就可以直接知道是哪個對應(yīng)的值發(fā)生了變化，結(jié)果如圖：
以上這篇vue watch監(jiān)聽對象及對應(yīng)值的變化詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了在Vue中如何將多個空格被合并顯示成一個空格,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
vue3+ts實現(xiàn)一個表單組件的詳細(xì)代碼
這篇文章主要介紹了vue3+ts實現(xiàn)一個表單組件的詳細(xì)代碼,確保通過axios調(diào)用后端接口來獲取省市區(qū)和街道數(shù)據(jù),并在選擇省市區(qū)時加載相應(yīng)的街道數(shù)據(jù),需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)勻速輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
本文主要介紹了如何在Vue中動態(tài)添加類名，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
淺談vue獲得后臺數(shù)據(jù)無法顯示到table上面的坑
這篇文章主要介紹了淺談vue獲得后臺數(shù)據(jù)無法顯示到table上面的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作教程
在Vue中可以使用異步函數(shù)和await關(guān)鍵字來控制上一步執(zhí)行完再執(zhí)行下一步,這篇文章主要給大家介紹了關(guān)于vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了使用Vue.js 和Chart.js制作絢麗多彩的圖表，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue中如何使用ztree,包括配置package.json，自動加載jquery的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
這篇文章主要介紹了Vue配置文件vue.config.js配置前端代理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
VUE使用DXFParser組件解析dxf文件生成圖片的操作代碼
這篇文章主要介紹了VUE使用DXFParser組件解析dxf文件生成圖片的操作代碼,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09