怎么在vue中利用watch对对象进行监控

这篇文章将为大家详细讲解有关怎么在vue中利用watch对对象进行监控，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

watch的作用：监听vue实例上数据的变动

示例：

queryData: { name: '', creator: '', selectedStatus: '', time: [], },

1、普通的watch

data() {  return {   frontPoints: 0   } }, watch: {  frontPoints(newValue, oldValue) {   console.log(newValue)  } }

2、数组的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中的属性发生变化（可被监测到的），便会执行handler函数；

如果想监测具体的属性变化，如pokerHistory变化时，才执行handler函数，则可以利用计算属性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对对象进行监控就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。