快捷導(dǎo)航

vue watch監(jiān)聽對象及對應(yīng)值的變化詳解

更新時(shí)間：2018年02月24日 15:11:05 作者：金大光

下面小編就為大家分享一篇vue watch監(jiān)聽對象及對應(yīng)值的變化詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

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);//但是這兩個(gè)值打印出來卻都是一樣的
      },
      deep:true
    }
  }
})
vm.a=2
vm.b.c=2

a是一個(gè)普通的值，當(dāng)a的值變化時(shí)會(huì)被監(jiān)聽到，b是一個(gè)對象，不能直接像a那么寫，需要深度監(jiān)聽才能捕捉到，但是當(dāng)我想去捕捉b對象中某一個(gè)值的變化時(shí)卻發(fā)現(xiàn)，打印出來的兩個(gè)值是不一樣的，如圖：

這樣就只能知道對象發(fā)生變化卻不知道具體哪個(gè)值發(fā)生了變化，如果想監(jiān)聽對象某一個(gè)值得變化可以利用計(jì)算屬性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計(jì)算過的值就可以直接知道是哪個(gè)對應(yīng)的值發(fā)生了變化，結(jié)果如圖：

以上這篇vue watch監(jiān)聽對象及對應(yīng)值的變化詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解Vue如何將多個(gè)空格被合并顯示成一個(gè)空格
這篇文章主要為大家詳細(xì)介紹了在Vue中如何將多個(gè)空格被合并顯示成一個(gè)空格,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
vue3+ts實(shí)現(xiàn)一個(gè)表單組件的詳細(xì)代碼
這篇文章主要介紹了vue3+ts實(shí)現(xiàn)一個(gè)表單組件的詳細(xì)代碼,確保通過axios調(diào)用后端接口來獲取省市區(qū)和街道數(shù)據(jù),并在選擇省市區(qū)時(shí)加載相應(yīng)的街道數(shù)據(jù),需要的朋友可以參考下
2024-07-07
vue實(shí)現(xiàn)勻速輪播效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)勻速輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
詳解如何在Vue中動(dòng)態(tài)添加類名
本文主要介紹了如何在Vue中動(dòng)態(tài)添加類名，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
淺談vue獲得后臺(tái)數(shù)據(jù)無法顯示到table上面的坑
這篇文章主要介紹了淺談vue獲得后臺(tái)數(shù)據(jù)無法顯示到table上面的坑，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
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制作絢麗多彩的圖表
這篇文章主要介紹了使用Vue.js 和Chart.js制作絢麗多彩的圖表，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下
2019-06-06
vue中如何使用ztree
這篇文章主要介紹了vue中如何使用ztree,包括配置package.json，自動(dòng)加載jquery的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-02-02
Vue配置文件vue.config.js配置前端代理方式
這篇文章主要介紹了Vue配置文件vue.config.js配置前端代理方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
VUE使用DXFParser組件解析dxf文件生成圖片的操作代碼
這篇文章主要介紹了VUE使用DXFParser組件解析dxf文件生成圖片的操作代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-09-09