vue watch 监听详解

Watch 可以监听计算属性里面值的改变，也可以监听对象属性值的改变，甚至可以监听router改变
具体写法如下：

一：监听计算属性 （注意：不要在计算属性中改变data中的值，会报错） watch中监听函数名字要与计算属性中函数名一致
computed:{
  test(){
	xxxxx
  }
},
watch(){
   test(newVal, oldVal){}
}

二： 监听data上的属性值(非复杂对象)变化  watch中函数名字要与data中属性名一致
data(){
	return{
		test: ‘’
	}
},
watch(){
  test(newVal, oldVal){}
}

三： 监听data上复杂对象值改变  watch中函数名字要与data中属性名一致
data(){
	return{
		test1: {
			test2: {
				test3: ‘8888’
			}
		} 
	}
},
watch(){
  test1: {
	deep: true, // 是否监听复杂对象值改变
	handle(newVal, oldVal){}
  }
}

四： 监听路由改变 比如#/test?name=3    变为  #/test?name=4 这种带值url上面参数值的变动监听
Watch(){
	$router: {
		deep: true,
		handle(newVal, oldVal){}
	}
}