vue中watch监听变化

一、普通监听

• 监听一个变量值的变化

<template>
	<input v-model='value' />
</template>
<script>
export default {
	data(){
		return {
			value: '111'
		}
	},
	watch:{
		value(newVal,oldVal){
			//newVal新值
			//oldVal旧值
		}
	}
}
</script>

• 监听一个对象中单个属性值的变化

<template>
	<input v-model='value1' />
</template>
<script>
export default {
	data(){
		return {
			obj:{
				value1: '111',
				value2: '222'
			}
		}
	},
	watch:{
		'obj.value1':function(newVal,oldVal){
			//newVal新值
			//oldVal旧值
		}
	}
}
</script>

二、深度监听

• 监听一个对象的变化

<template>
	<input v-model='value1' />
	<input v-model='value2' />
</template>
<script>
export default {
	data(){
		return {
			obj:{
				value1: '111',
				value2: '222'
			}
		}
	},
	watch:{
		obj: {
			handler: function(newVal){
				//newVal新值
      		},
     		 deep: true,//当属性值发生变化时都会触发function
     		 immediate: true,//初始化时就会触发function
		}
	}
}
</script>