vue中监听对象类型变量值的变化

vue开发在写事件监听时直接使用watch不起作用，查了下需要用到watch的deep属性，过程如下

有一个对象：

data () {
    return {
        valueGroups: {
            systemValue: 0,
            firstValue: [],
            secondValue: [],
            thirdValue: [],
        }
    }
}

 

刚开始直接设置监听：

watch: {
    valueGroups: function (val) {
        console.log(val)
    }
}

这样对于普通数据字符串、整形以及数组等等都是有作用的，但是对于对象这样的数据不起作用

 

查阅vue api文档关于watch api的介绍发现vue为了监听对象内部值的变化，可以在参数中指定deep: true 属性，于是修改如下：

watch: {
    valueGroups: {
        deep: true,
        handler: function (val) {
            console.log(val.firstValue)
        }
     }
}

成功监听！