Vue怎么使用watch监听数组或对象

这篇文章主要介绍“Vue怎么使用watch监听数组或对象”，在日常操作中，相信很多人在Vue怎么使用watch监听数组或对象问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue怎么使用watch监听数组或对象”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

对象的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监听数组或对象”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！