vue的watch属性，当监听的值改变了却不能触发事件

Question

我在子组件中用watch监听了父组件传过来的值，但是当这个值改变了之后，watch并没有被触发

props:[
  'chartMessage'
],
watch:{
  chartHandle(val){
    console.log(1111)
  }
},
mounted(){
  this.chartHandle = this.chartMessage;
},
data() {
  return{
    chartHandle:{},
  }
},

我这个chartMessage改变之后，连console.log()也没有触发，是怎么回事，求指教。。

Answer 1

如果你的chartMessage传入的是对象，你只改对象内的值不会触发watch，你可以这么写：

watch:{
  chartMessage: {
    deep: true,
    handler(val){
        console.log(111)
        this.drawChart(val)
    }
  }
}

如果不是这种情况，建议你做一个小demo复现一下情况，再把所有代码放出来

Answer 2

监听的是 data 里的值

Answer 3

讲道理不会出现这个情况,给个在线调试的列子看下

Answer 4

props 内部是自带监听的

多看看文档

你如果想通过props 传值触发某个事件 可以去给data里面一个值去赋值
然后监听

Answer 5

watch只有在监听的值变化的时候才会触发，chartMessage初始化的时候不会触发watch，只有在父组件再次改变了chartMessage时才会触发watch，也就是说至少要有两次变化