watch监听
执行的时候，watch方法未执行。并没有报错
遇见的问题
子组件，定义了props，属性里有一个selectedData，但是在执行的时候，这个对象在父组件里也修改了，可是就是死活没有触发。。。
观察报错
比较不好调查的就是，这个并没有报错，只是不执行，也看不到真正传入到组件内部的对象值。
最后在各种调查之后，发现了一个问题，就是如下两种写法是有区别的，传递到子组件的部分没有变化，但是在父组件里的赋值行为不一样，会导致监听失效
好用的
let expenditure = res.data
let result = {}
let y = []
let series = []
for (let i = 0; i < expenditure.length; i++) {
const item = expenditure[i]
y.push(item.key)
series.push(item.value)
}
result.y = y
result.series = series
this.selectedData = result
不好用的
let expenditure = res.data
let y = []
let series = []
for (let i = 0; i < expenditure.length; i++) {
const item = expenditure[i]
y.push(item.key)
series.push(item.value)
}
this.selectedData.y = y
this.selectedData.series = series
这里会发现，只有当写了这个对象使用=号被赋值的时候，才能被watch监听到。那么可以理解成是地址的变化监听
问题解决
方案一
改成=号赋值的才能让watch监听到变化。至于为啥呢，因为默认的watch只会监听到对象的第一层，上边不好用的写法，第一层是没有改变的，那自然不会走到watch里。所以会引出方案二，深度监听
方案二
深度监听
就是在监听的时候，增加一个深度监听的属性，值给上true，写法为
watch: {
selectedData: {
handler: function (newVal, oldVal) {
// this.chart.clear()
this.barOption.series[0].data = newVal.series
this.barOption.yAxis.data = newVal.y
this.chart.setOption(this.barOption, true)
},
deep: true
}
}
这样就能完成对这个selectedData对象的深度监听了，任何一个层级的值有改变，都会触发了。
结语
先要了解watch是啥？
watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。简单来说就是，vue是数据双向绑定，当页面数据发生变化时，我们通过watch可以拿到变化前和变化后的值，之后做一系列操作。
基本语法
watch: {
被监听的数据: {
handler(数据改变后的值, 数据改变之前的值) {
相关代码逻辑...
}
}
}
在handler平级的位置可以写上其它属性，immediate，deep
immediate 如果设置为true，那么就是页面刚加载的时候就会执行，这样的话，newValue是具体的值。但是oldValue是undefined。
deep 顾名思义，就是深度监听了，如果为true，则对象里的所有内容都会被监听到
