监听器
侦听器
作用:检测变量值的变化,只要数据变化,就可以触发相应的函数执行一定的操作。
作为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>