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)文章
這篇文章主要介紹了vue實現(xiàn)表單未編輯或未保存離開彈窗提示功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
使用iView Upload 組件實現(xiàn)手動上傳圖片的示例代碼
這篇文章主要介紹了使用iView Upload 組件實現(xiàn)手動上傳圖片的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
腳手架是一種用于快速開發(fā)Vue項目的系統(tǒng)架構(gòu)，這篇文章主要介紹了Vue腳手架實現(xiàn)試卷頁面功能，通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
vue mint-ui學(xué)習(xí)筆記之picker的使用
本篇文章主要介紹了vue mint-ui學(xué)習(xí)筆記之picker的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
從零開始Vue3數(shù)據(jù)交互之promise用法詳解
這篇文章主要介紹了Axios的基本使用,包括異步編程的基礎(chǔ)知識,如Promise的介紹、特點和基本用法,以及如何使用then、catch和async/await來處理異步操作,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
Vue狀態(tài)模式實現(xiàn)窗口?？抗δ?靈動、自由, 管理后臺Admin界面)
這篇文章主要介紹了Vue狀態(tài)模式實現(xiàn)窗口?？抗δ?靈動、自由, 管理后臺Admin界面),本文通過實例代碼文字說明給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue工程如何為組件自動注入全局樣式文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-element-admin?登陸及目錄權(quán)限控制的實現(xiàn)
本文主要介紹了vue-element-admin?登陸及目錄權(quán)限控制的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue3在css中使用v-bind綁定js/ts變量(在scss和less中使用方式)
v-bind是Vue.js中的一個核心指令,用于在Vue組件或DOM元素上綁定數(shù)據(jù)屬性,下面這篇文章主要給大家介紹了關(guān)于Vue3在css中使用v-bind綁定js/ts變量的相關(guān)資料,也可以在scss和less中使用方式,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue-datepicker的使用，本文通過實例代碼大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07