watch事件监听

监听属性都可以监听哪个内的值改变？
	    1. data内的数据
	    2. 计算属性内的值
	    3. 监听路由
	    4. 父传子的props数据的变化

<template>
	<div>
			//监听属性  watch和 data同一级 
				watch: {
					要监听的值(新值，旧值){
						
					}
				}
				
			//如果说要开启立即监听 （一进入页面立马触发）  深度监听 （要监听引用数据类型的值的改变）和 data同一级
				watch: {
					要监听的值： {
						hanlder(newVal,oldval){
							
						},
						immediate: true // 立即监听
						deep: true // 深度监听
					}
				}
			
		
		
		<h1>{{num}}</h1>
		<pre>{{obj}}</pre>
		<p>计算属性: {{numCom}}</p>
		<button type="button" @click="add">加1</button>
	</div>
</template>

<script>
	export  default {
		data:function(){
			return {
				num: 0,
				obj: {
					num:0
				}
			}
		},
		methods:{
			add(){
				this.num++
				this.obj.num++
			}
		},
		computed:{
			numCom(){
				return this.num**2
			}
		},
		watch:{
			num(newVal,oldVal){
			 	console.log('改变了1',newVal,oldVal)
			 }
			num: {
				handler(newVal,olVal){
			 		console.log('改变了1',newVal,olVal)
			 	},
		 	immediate: true, //立即监听
			deep: true//深度监听
			}
			//引用数据类型
			// obj: {
			// 	handler(newVal,oldVal){
			// 		console.log('obj的num改变了',newVal,oldVal)
			// 	},
			// 	deep: true //深度监听
			// }
			
			 'obj.num': {
			 		handler(newVal,oldVal){
			 			console.log('obj的num改变了',newVal,oldVal)
			 		}
			 },
			'obj.num'(newVal,oldVal){
				console.log('obj的num改变了',newVal,oldVal)
			},
			numCom(n,o){
				console.log('计算属性的改变',n,o)
			}
		}
	}

</script>

监听路由
在路由页面监听路由变化，如下：

<script type="text/javascript">
	export default {
		watch:{
			// $route(n,o){
			// 	console.log('路由改变了',n,o)
			// }
		}
	}
</script>