vue watch監(jiān)控對(duì)象的簡(jiǎn)單方法示例
watch的作用：監(jiān)聽(tīng)vue實(shí)例上數(shù)據(jù)的變動(dòng)
示例：
queryData: {
name: '',
creator: '',
selectedStatus: '',
time: [],
},
1、普通的watch
data() {
return {
frontPoints: 0
}
},
watch: {
frontPoints(newValue, oldValue) {
console.log(newValue)
}
}
2、數(shù)組的watch
data() {
return {
winChips: new Array(11).fill(0)
}
},
watch: {
winChips: {
handler(newValue, oldValue) {
for (let i = 0; i < newValue.length; i++) {
if (oldValue[i] != newValue[i]) {
console.log(newValue)
}
}
},
deep: true
}
}
3、對(duì)象的watch
data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
watch: {
bet: {
handler(newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}
tips: 只要bet中的屬性發(fā)生變化（可被監(jiān)測(cè)到的），便會(huì)執(zhí)行handler函數(shù)；
如果想監(jiān)測(cè)具體的屬性變化，如pokerHistory變化時(shí)，才執(zhí)行handler函數(shù)，則可以利用計(jì)算屬性computed做中間層。
事例如下：
4、對(duì)象具體屬性的watch［活用computed］
data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
computed: {
pokerHistory() {
return this.bet.pokerHistory
}
},
watch: {
pokerHistory(newValue, oldValue) {
console.log(newValue)
}
}
總結(jié)
到此這篇關(guān)于vue watch監(jiān)控對(duì)象的文章就介紹到這了,更多相關(guān)vue watch監(jiān)控對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例
這篇文章主要為大家介紹了Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue-next-admin項(xiàng)目使用cdn加速詳細(xì)配置
這篇文章主要為大家介紹了vue-next-admin項(xiàng)目使用cdn加速的詳細(xì)配置，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了vue使用vue-cli快速創(chuàng)建工程,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
使用vue-draggable-plus實(shí)現(xiàn)拖拽排序
最近遇到一個(gè)需求,在 Vue3 的一個(gè) H5 頁(yè)面當(dāng)中點(diǎn)擊拖拽圖標(biāo)上下拖動(dòng) tab 子項(xiàng),然后點(diǎn)擊保存可以保存最新的 tab 項(xiàng)順序,同事說(shuō)可以用 vue-draggable-plus 這個(gè)庫(kù)來(lái)實(shí)現(xiàn)拖拽,所以本文給大家介紹了如何使用vue-draggable-plus實(shí)現(xiàn)拖拽排序,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue如何使用mixins優(yōu)化組件，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
vue.js實(shí)現(xiàn)仿原生ios時(shí)間選擇組件實(shí)例代碼
本篇文章主要介紹了vue.js實(shí)現(xiàn)仿原生ios時(shí)間選擇組件實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-12
vue代理如何配置重寫(xiě)方法(pathRewrite與rewrite)
這篇文章主要介紹了vue代理如何配置重寫(xiě)方法(pathRewrite與rewrite),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue.js通用應(yīng)用框架-Nuxt.js的上手教程
本篇文章主要介紹了Vue.js通用應(yīng)用框架-Nuxt.js的上手教程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
vue使用blob下載文件遇到的問(wèn)題小結(jié)
Blob?對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類(lèi)文件對(duì)象，這篇文章主要介紹了vue使用blob下載文件遇到的問(wèn)題記錄,需要的朋友可以參考下2024-02-02
vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能
這篇文章主要介紹了vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01