本文共 555 字，大约阅读时间需要 1 分钟。

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

有一个对象：

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

刚开始直接设置监听：

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

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

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

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

成功监听！

转载地址：http://fbrof.baihongyu.com/