[JavaScript知识库]vue watch监视对象的属必以及它的深度监视

我们在使用vue的时候有是， 我们想监视视， data中的对象的某一个属性

	data(){
		return {
			student:{
				age:10,
				sex:"男"
			}
		}
	}

上面的属性， 我们想监视 student.age 的属性， 此时我们的watch 应该是这样写的

watch:{
	'student.age':{
		handler(newvalue,oldvlaue){
		......
		}
	}
}

这样， 我们就可以监视到 student.age的属性的变化， 但是这样的写法， 只能监视到 student.age的属性
那么我们想 监视到 student下面的所有属性， 应该怎么写呢

watch:{
	student(newvalue,oldvalue){
		......
	}
}

上面这样的写法是错误的， 因为此时 student 对象的 地址值是不会发生改变的， 所以 vue 是监视不到 student 内部的属性变化的，

要解决上面的问题， 我们就要使用 深渡监视， 如下

watch:{
	student:{
		deep:true,
		handler(newvalue, oldvalue){
			.....
		}
	}
}

上面的写法是 watch 的完整 的写法形式， deep:true, 表示监视 student 内部的所有属性的变化