Vue使用watch監(jiān)聽數(shù)組或對象

更新時間：2022年06月26日 11:29:54 作者：小旭2021

這篇文章介紹了Vue使用watch監(jiān)聽數(shù)組或對象的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

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)
　　}
}

到此這篇關于Vue使用watch監(jiān)聽數(shù)組或對象的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue echarts封裝組件需求分析與實現(xiàn)
在平常的項目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數(shù)據(jù),需要在圖表上動態(tài)的進行呈現(xiàn),接下來我們就模擬從后端獲取數(shù)據(jù)然后進行呈現(xiàn)的方法，這篇文章主要介紹了Vue echarts封裝組件需求分析與實現(xiàn)
2022-10-10
淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別
本文主要介紹了淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-07-07
Vue3+Tsx給路由加切換動畫時的踩坑及解決
這篇文章主要介紹了Vue3+Tsx給路由加切換動畫時的踩坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue keepAlive頁面強制刷新方式
這篇文章主要介紹了Vue keepAlive頁面強制刷新方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vee-Validate的使用方法詳解
本篇文章主要介紹了Vee-Validate的使用方法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
Vue之計算屬性詳解
這篇文章主要為大家介紹了Vue的計算屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
vue封裝一個右鍵菜單組件詳解(復制粘貼即可使用)
關于vue項目中會出現(xiàn)一些需求,就是右鍵菜單項的功能實現(xiàn),下面這篇文章主要給大家介紹了關于vue封裝一個右鍵菜單組件(復制粘貼即可使用)的相關資料,需要的朋友可以參考下
2022-12-12
Vue?Baidu?Map之自定義點圖標bm-marker的示例
這篇文章主要介紹了Vue?Baidu?Map之自定義點圖標bm-marker,文中給大家介紹了vue-baidu-api地圖標記點（自定義標記圖標），設置標記點的優(yōu)先級問題，結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2023-08-08
手把手教你vue-cli單頁到多頁應用的方法
本篇文章主要介紹了手把手教你vue-cli單頁到多頁應用的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
Vue.js 和 MVVM 的注意事項
MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發(fā)的架構模式，Vue.js 是一個提供 MVVM 風格的雙向數(shù)據(jù)綁定的 Javascript 庫，專注于View 層。這篇文章給大家介紹Vue.js 和 MVVM 的注意事項，感興趣的朋友一起看看吧
2016-11-11