Vue:侦听器watch

watch侦听器可以侦听到data中数据的变化，当值发生了改变，watch 侦听器就会被触发，所有的侦听器函数都要写到watch 节点中
代码示范：

<template>
	<div>
		<p>小宇今年 {{age}} 岁了</p>
		<button @click="age++">年龄+1</button>
	</div>
</template>

<script>
export default{
	data(){
		return {
			age:22
		}
	},
	watch:{
		// 第一个参数表示修改后的新值，第二个参数表示未修改前的旧值，第二个参数如不需要，可省略
		// 函数名不能乱写，要侦听哪项的数据变化，函数名就写谁
		// 年龄每修改一次，就会触发一次age侦听器函数
		age(newVal,oldVal){
			console.log('age最新的值是：'+ newVal)
		}
	}
}
</script>

上面的侦听器写法，只有在data 数据发生更改时才会触发，并不会在页面一加载时就触发
如果想要在页面一加载时就侦听一次数据呢？
需要把函数形式改为对象格式进行配置，如下代码示范：

<template>
	<div>
		<p>小宇今年 {{age}} 岁了</p>
		<button @click="age++">年龄+1</button>
	</div>
</template>

<script>
export default{
	data(){
		return {
			age:22
		}
	},
	watch:{
		// 函数名为age，表示侦听data中age数据的变化
		// 把函数形式改写为对象格式
		age:{
			// 这里的handler()是固定的写法，相当于age()，里面的参数也是两个，新值和旧值
			// 当数据发生改变时，handler函数就会被触发
			handler(newVal){
				console.log('age最新的值是：' + newVal)
			},
			// immediate:true 表示当页面加载后，会马上侦听一次数据
			immediate:true
		}
	}
}
</script>

深度侦听data 中对象属性的变化
上面的写法都是普通的变量:值的写法，如果是对象的写法，当修改了对象中的属性时，就无法侦听到了，因此需要深度侦听
代码示范：

<template>
	<div>
		<p>{{users.name}}今年 {{users.age}} 岁了</p>
		<button @click="users.age++">年龄+1</button>
	</div>
</template>

<script>
export default{
	data(){
		return {
			users: {id:1,name:'小宇',age:20}
		}
	},
	watch:{
		// 依旧把函数形式改写为对象格式
		// 但这里的名字不能写age，要写成对象名：users
		// 因为要侦听的是users对象中属性的变化
		users:{
			// 当数据发生改变时，handler函数就会被触发
			handler(newVal){
				console.log('age最新的值是：' + newVal.age)
			},
			// immediate:true 表示当页面加载后，会马上侦听一次数据
			immediate:true,
			// deep:true 表示深度监听，可以监听到对象中的每个属性的变化
			deep:true
		}
	}
}
</script>