vue —— 侦听器

 watch侦听器允许开发者监视数据变化，从而针对数据的变化做特定的操作。

侦听器是定义在watch节点下的。 侦听器本质上是一个函数，函数名是要监听的数据名，当数据发生变化时就触发这个侦听器。

侦听器有两种格式：

1. 方法格式的侦听器
2. 对象格式的侦听器 

方法格式的侦听器： 

<input type='text' v-model='username'/>　
data:{
username:''
}
watch:{
//监听username值的变化，newVal是变化后的新值，oldVal是变化后的旧值，新值在前，旧值在后
username(newVal.oldVal){}
}

对象格式的侦听器：

<input type='text' v-model='username' />
data:{
username:''
}
watch:{
//定义对象格式的监听器
username:{
//侦听器的处理函数
handler(newVal,oldVal){},
//immdiate选项的默认值是false
//immdiate的作用是：控制侦听器是否自动触发一次
immediate:true

}
}

 

侦听器的使用场景：判断用户名是否被占用，由于函数不会主动被调用，所以当一进入到页面就需要调用一次监听器时，使用对象格式的监听器，并且添加immediate选项，并修改其值为true。

在方法格式的侦听器中，如果侦听的是一个对象，那么对象中属性发生了变化，不会触发侦听器！

在对象格式的侦听器中，可以通过deep选项让侦听器深度监听对象中每个属性的变化。