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)文章
ant design vue中table表格滾動加載實現(xiàn)思路
在處理一寫數(shù)據(jù)量特別大的情況下,我們不能把后端的數(shù)據(jù)一次性全部拿到前端在table表格中展示,為了考慮性能優(yōu)化,使用了滾動加載表格數(shù)據(jù),這篇文章主要介紹了ant design vue中table表格滾動加載實現(xiàn)思路,需要的朋友可以參考下2024-07-07
本文通過實例代碼給大家介紹了Vue lazyload圖片懶加載的相關(guān)知識，通過導入配置等操作src/main.jswenj ,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-12-12
這篇文章主要介紹了Vue-element中el-input輸入卡頓問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue文件使用iconfont解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
項目中的聯(lián)想輸入框現(xiàn)在都是采用的el-autocomplete實現(xiàn)的，但是數(shù)據(jù)增多就會需要做分頁處理，本文主要介紹了vue對el-autocomplete二次封裝增加下拉分頁，感興趣的可以了解一下2022-03-03
這篇文章主要介紹了vue中eslintrc.js配置最詳細介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片裁剪后上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
vue.js如何在網(wǎng)頁中實現(xiàn)一個金屬拋光質(zhì)感的按鈕
這篇文章主要給大家介紹了關(guān)于vue.js如何在網(wǎng)頁中實現(xiàn)一個金屬拋光質(zhì)感的按鈕的相關(guān)資料,文中給出了詳細的實例代碼以及圖文將實現(xiàn)的方法介紹的非常詳細,需要的朋友可以參考下2023-04-04
Teleport是一個內(nèi)置組件,它可以將一個組件內(nèi)部的一部分模板傳送到該組件的 DOM 結(jié)構(gòu)外層的位置去,本文主要介紹了Vue3中Teleport用法小結(jié),感興趣的可以了解一下2025-04-04
這篇文章主要給大家介紹了關(guān)于Vue中$root使用方法及注意事項的相關(guān)資料,vue中$root是用來訪問根組件的,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03