8.监视属性

监视属性：当被监视的属性发生变化时执行指定方法。

1. 基本配置

		<script>
			const vm = new Vue({
				el:"#app",
				data:{
					name:""
				},
				watch:{
					name:{
						immediate:true, // 在初始化时执行一次
						handler(newVal,oldVal){ //属性变化时执行函数
							console.log(oldVal+"====>"+newVal);
						}
					}
				}
			})
		</script>

2. 深度监视

• 用于监视被监视对象的属性是否发生改变

		<script>
			const vm = new Vue({
				el:"#app",
				data:{
					name:{
						a:'',
						b:''
					}
				},
				watch:{
					name:{
						deep:true; // 开启深度监视,监视多级结构中属性的变化
						immediate:true, // 在初始化时执行一次
						handler(newVal,oldVal){ //属性变化时执行函数
							console.log(oldVal+"====>"+newVal);
						}
					}
				}
			})
		</script>

Vue 本身可以监视属性的多层结构中的改变，但是提供的监视属性watch中多层监视默认是关闭状态。

3. 在不需要对监视进行其他操作时，其执行函数可以简写：

<script>
			const vm = new Vue({
				el:"#app",
				data:{
					name:""
				},
				watch:{
					name(newVal,oldVal){
							console.log(oldVal+"====>"+newVal);
						}
				}
			})
		</script>