监听

监听器

侦听器

作用：检测变量值的变化，只要数据变化，就可以触发相应的函数执行一定的操作。

作为vue实例的配置选项，watch

1.普通监听

可以检测标量类型数据的变化：字符串、数字（整数、浮点数）、布尔值

当依赖的数据发生变化时，就会触发对应的函数

①写法一

<script>
	new Vue({
		el:"",
		data:{ipt:''},
		watch:{
			ipt([newVal,oldVal]){
				....
			}
		}
	})
</script>

②写法二

<script>
	new Vue({
		el:"",
		data:{ipt:''},
		watch:{
			ipt:{
                handler([newVal,oldVal]){...}
            }
		}
	})
</script>

2.深度监听

如果要监听的数据类型是复合类型时，普通的监听方式是无法实现，需要使用第二种写法并添加deep配置选项，来实现监听复合类型数据的变化。

复合类型：对象、数组

<script>
	new Vue({
		el:"",
		data:{
            info:{ name:'' }
        },
		watch:{
			info:{
                handler:function([newVal,oldVal]){...},
                deep:true//显示的设置为深度监听
            }
		}
	})
</script>