原数据：

queryData: {
    name: '',
    creator: '',
    selectedStatus: '',
    time: [],
},

1我要监听queryData

watch: {
    queryData: function(newVal,oldVale) {
        //do something
    },
},

注意这里要用functio(){}写法，千万不能用简化的()=>{}语法！！！原因不知道，实践的坑就是如此。

2我要监听queryData里的name

2.1使用deep全监听（不推荐）

watch: {
    queryData: function(newVal,oldVal) {
        console.log(queryData.name)
    },
    deep: true //增加deep，表示监听里面所有嵌套的对象
},

2.3针对监听（推荐）

刚才的deep设为了true，这样的话，如果修改了这个queryData中的任何一个属性，都会执行handler这个方法。不过其实这样开销是蛮大的，尤其是对象里面结构嵌套过深的时候，所以可以优化一下

watch: {
    'queryData.name': function(newVal,oldVal) {
        //do something
    },
},

举例：ElementUi的日期控件清空时间，会导致值变null，需要修正

watch: {
    'form.SendTime': function(newVal,oldVal) {
        if(newVal == null){
            this.form.SendTime=''
        }
    },
},

2.3巧用计算属性

computed+watch的方案

computed: {
    aaa: function() {
        return this.queryData.name
    }
},

watch: {
    aaa: function(newVal,oldVale) {
            //do something
    },
},

注意computed里也不能用=>{}箭头语法，因为它会指向window作用域，而不是vue，导致报错

3v-if与子组件的watch的联动坑

之前犯了一个错误，在弹窗功能里发现的：

1. 父页面用v-if去控制弹窗子组件是否显示，并希望把父组件的客户ID传递给弹窗使用

2. 但是发现，v-if后出现的子组件，根本watch不到父组件传递过来的客户ID

3. 因为传递的数据，子组件生成前已经到达，当watch监听时，已经是结果数据，没发生变化，所以不触发事件

4. 正确的做法，是直接把客户ID，在子组件的data里赋值，或者直接用，不需要再监听了

那为什么有时候子组件有需要watch父组件某个参数呢？

答案：那是因为初次生成后，父组件改数据，子组件不能及时知道，传递要时间，所以要watch监听，及时响应