快捷導(dǎo)航

vue watch關(guān)于對(duì)象內(nèi)的屬性監(jiān)聽(tīng)

更新時(shí)間：2019年04月22日 16:08:47 作者：寶貝QY

這篇文章主要介紹了vue watch關(guān)于對(duì)象內(nèi)的屬性監(jiān)聽(tīng)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下

vue可以通過(guò)watch監(jiān)聽(tīng)data內(nèi)數(shù)據(jù)的變化。通常寫(xiě)法是：

data: {
 a: 100
},
watch: {
 a(newval, oldVal) {
  // 做點(diǎn)什么。。。
  console.log(newval, oldVal)
 }
}

vue監(jiān)聽(tīng)整個(gè)對(duì)象，如下：

•deep: true 深度監(jiān)測(cè)

data: {
 return {
  msg: {
   name: 'hahah',
   color: 'red'
  }
 }
}
watch: {
 msg: {
  handler(newValue, oldValue) {
   // 做點(diǎn)什么。。。
   console.log(newValue)
 },
 deep: true
}

如果監(jiān)聽(tīng)對(duì)象內(nèi)的某一具體屬性，可以通過(guò)computed做中間層來(lái)實(shí)現(xiàn)：

computed: {
 name() {
  return this.msg.name
 }
},
watch:{
 name(newValue, oldValue) {
   // 做點(diǎn)什么。。。
   console.log(newval, oldVal)
 }
}

總結(jié)

以上所述是小編給大家介紹的vue watch關(guān)于對(duì)象內(nèi)的屬性監(jiān)聽(tīng)的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

使用Vue-Router 2實(shí)現(xiàn)路由功能實(shí)例詳解
vue-router 2只適用于Vue2.x版本，下面我們是基于vue2.0講的如何使用vue-router 2實(shí)現(xiàn)路由功能,需要的朋友可以參考下
2017-11-11
vue使用關(guān)于speak-tss插件的詳細(xì)介紹及一些配置項(xiàng)
本文詳細(xì)介紹了speak-tss插件在Vue3中的使用方法和配置,首先需要下載依賴,然后引入插件,并進(jìn)行實(shí)例化和配置,配置項(xiàng)包括音量、語(yǔ)言、語(yǔ)音、語(yǔ)速、音調(diào)等,speak-tss支持多種語(yǔ)言和語(yǔ)音,適用于需要文本語(yǔ)音播報(bào)的場(chǎng)景
2024-09-09
在Vue中如何使用Cookie操作實(shí)例
這篇文章主要介紹了在Vue中如何使用Cookie操作實(shí)例的相關(guān)資料,需要的朋友可以參考下
2017-07-07
Vue中如何運(yùn)用TS語(yǔ)法
本文主要介紹了Vue中如何運(yùn)用TS語(yǔ)法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
超詳細(xì)的5個(gè)Shell腳本實(shí)例分享(值得收藏)
這篇文章主要介紹了超詳細(xì)的5個(gè)Shell腳本實(shí)例分享(值得收藏),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
Vue3?源碼分析reactive?readonly實(shí)例
這篇文章主要為大家介紹了Vue3?源碼分析reactive?readonly實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
vue-cli構(gòu)建項(xiàng)目使用 less的方法
這篇文章主要介紹了vue-cli構(gòu)建項(xiàng)目使用 less，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
深入解析Vue中的this.$forceUpdate()的使用
this.$forceUpdate()?是一個(gè)重要的實(shí)例方法,本文主要介紹了深入解析Vue中的this.$forceUpdate()的使用,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-07-07
淺談vuex actions和mutation的異曲同工
這篇文章主要介紹了淺談vuex actions和mutation的異曲同工，詳細(xì)的介紹了actions和mutation的使用和區(qū)別，非常具有實(shí)用價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
VScode更新后安裝vetur仍無(wú)法格式化vue文件的解決
這篇文章主要介紹了VScode更新后安裝vetur仍無(wú)法格式化vue文件的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10