​watch深度监听失效解决方案以及原因​

总结：

watch深度监听失效一般是由于变化的属性未初始化，导致watch进行深度监听初始化时，没有录入进去，从而导致监听失效。可以使用this.$set(监听的对象, 未初始化的监听对象的属性, 改动后的值)这样可以必然触发watch的监听。

案发情况：

首先，watch监听一般都这么写：

watch: {
    obj(newVal, oldVal) {
        // todo
        console.log(newVal, oldVal)
    }
}
复制代码

但是watch如果要监听对象里面的属性，那么需要这么写，上面是简写，现在就需要详写，并且配置deep: true，打开深度监听开关。

watch: {
    obj: {
        handler(newVal, oldVal) {
            // todo
            console.log(newVal, oldVal)
        },
        deep: true, // 是否开启深度监听
        immediate: true, // 是否初始化时就执行一次
    }
}
复制代码

但是有时候我们会遇到这样的：

先是页面初始化，能看到正常的数据展示：展示父组件传递的值：{name: 'clw'}，然后触发方法changeObj，给对象增加了一个属性id，以及值1，但是子组件的watch却监听不到，即使开启了深度监听，也是一样的问题。

这是因为vue在初始化时，虽然开启了深度监听，但它只会监听父组件data中obj已有的属性name，新增的id属性不会监听，这个可以去了解下vue的源码或者监听实现。

vue对于这种情况给出2种解决方式：

• 方式一：如果知道会新增的属性，那么在父级初始化的data的obj中也写上该属性，比如目前就是：obj: {name: 'clw', id: ''}，这样深度监听时自然也会把id属性监听上。
• 方式二：使用this.$set()方法，手动告诉vue需要监听该参数，比如此处需要在父级的changeObj方法中把this.obj.id = '1'改为this.$set(this.obj, 'id', '1')这样。即：this.$set(监听的对象, 未初始化的监听对象的属性, 改动后的值)。

// 父组件
<template>
    <son :obj="obj"></son>
</template>
<script>
export default{
    data() {
        return {
            obj: {
                name: 'clw'
            }
        }
    },
    methods: {
        changeObj() {
            this.obj.id = '1'
        }
    }
}
</script>
​
复制代码

// 子组件
<template>
    <span>展示父组件传递的值：{{msg}}</span>
</template>
<script>
export default{
    props: {
        obj: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            msg: ''
        }
    },
    watch: {
        obj: {
            handler(newVal, oldVal) {
                this.msg = JSON.stringify(newVal)
            },
            deep: true,
            immediate: true    
        }
    }
}
</script>