【vue学习】watch监听问题

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，则对象里的所有内容都会被监听到