vue的watch深度监测

项目做多了就会知道有很多场景会让你无法想象到官网中的api可以解决问题，所以，这一次我要把遇到的问题和场景结合知识点汇总一下目前用的最多的两个场景关于深度监测的问题。

场景一

vue组件出现了3个层级的嵌套：a是b的父组件，b是c的父组件
问题来了：a传参给b和c一起用时，只有b受用，c这时就是个问题了，怎么办呢？
首先： a传给b我们无须理会，正常处理即可。
第二步： 参数名称：isShow，我们必须监听a传给b的参数isShow有没有变化，如下：

<template>
<C :showC="isShowC"></C>
</template>
<script>
	export default{
        props:{
            isShow:{
                type:[Boolean],
                default:true,
         },
		data() {
			return {
		      	isShowC: false,
		  	}
		},
		watch: {
		    isShow:{
		        handler: function(n,o){
		            if(n){
		            	// 如果有变化,直接赋值
		                this.isShowC=n;
		            }
		        }
		    },
		},
	}
</script>

**第三步：**这一步是重点，重点看immediate该回调将会在侦听开始之后被立即调用

<script>
	export default{
        props:{
            isShowC:{
                type:[Boolean],
                default:true,
         },
		data() {
			return {

		  	}
		},
		watch: {
		    isShowC:{
                handler(n, o) {
                    if(n) {
                        // 写逻辑，想干什么，你们自己看着办
                    }else {
                        // 写逻辑，想干什么，你们自己看着办
                    }
                }
                immediate: true, // immediate该回调将会在侦听开始之后被立即调用
		    },
		},
	}
</script>

场景二

监听对象里某个属性

<script>
	export default{
        props:{
            isShowC:{
                type:[Boolean],
                default:true,
         },
		data() {
			return {
				form: {
					location: '',
					name: '',
					item: {
						lable: '',
						value: ''
					}
				}
		  	}
		},
		watch: {
			'form.location': function (n, old) { /* ... */ },
			'form.item.lable': function (n, old) { /* ... */ }
		},
	}
</script>

查看官网文档.