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