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