Vue-watch监听功能（侦听器）

Vue内watch侦听器详解

watch是Vue内部提供的一个用于侦听功能的更通用的方法，其用来响应数据的变化，通过特定的数据变化驱动一些操作。Vue官方文档解释当需要在数据变化时执行异步或开销较大的操作时，推荐使用该方法。

<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			variable:null,  //需要监听的变量
		},
		watch:{
			// watch内监听variable变量，当其值有变化时执行
			variable(newVal,oldVal){
				// newVal为新值，oldVal为旧值
			}
		}
	}
</script>

也可以这样写

		watch:{
			// watch内监听variable变量，当其值有变化时执行
			variable:{
				handler(newVal,oldVal){
					// newVal为新值，oldVal为旧值
				}
			}
		}

immediate用法

上面是watch侦听器的普通用法，就是当未设置immediate或者immediate的值为false时，被侦听的变量在页面初次加载时第一次绑定值得时候，并不会执行监听操作；但是当设置了immediate的值为true时，则会立即执行一次监听操作。

		watch:{
			// watch内监听variable变量，当其值有变化时执行
			variable:{
				handler(newVal,oldVal){
					// newVal为新值，oldVal为旧值
				}，
				immediate:true   //在页面初次加载时，就会执行一次监听操作，调用这个函数
			}
		}

deep深度监听

侦听普通变量的变化是使用以上方法，当侦听的某个变量值是对象时则不起作用，这时需要使用deep深度监听。对象内有多个属性时，对象内的每个属性都会被侦听，每个属性的变化都会执行一次侦听操作。

<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			person:{
				name:'',
				age:'',
				sex:''
			},
		},
		watch:{
			// 此处监听person对象变量
			person:{
				handler(newVal,oldVal){
					// newVal为新值，oldVal为旧值
				},
				deep:true //深度监听，当监听对象中的某个属性发生变化时，都会进行监听操作，调用这个函数
			}
		}
	}
</script>

所以，完整版可以这样写。既能实现首次加载时监听又能实现深度监听。

<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			person:{
				name:'',
				age:'',
				sex:''
			},
		},
		watch:{
			// 此处监听person对象变量
			person:{
				handler(newVal,oldVal){
					// newVal为新值，oldVal为旧值
				},
				immediate:true,   //在页面初次加载时，就会执行一次监听操作，调用这个函数
				deep:true,  //深度监听，当监听对象中的某个属性发生变化时，都会进行监听操作，调用这个函数
			}
		}
	}
</script>