vue的侦听器（immediate，deep）

1.侦听器的定义：

　　第一种：方法格式

watch：{
    //侦听的名字
       username(newValue,odValue){
}
}

　　第二种：对象格式

watch：{
    //侦听的名字
       username:{
        handler(newValue,odValue){}，
         immediate：true，
　　　　　　deep:true
          }
}
}

注意：在对象格式定义时，对象中函数的名字必须是handler(),否则出错

此外，在对象格式中，用immediate：true可以页面打开自动触发一次侦听器。

用deep：true可以深度监听

 

2.监听对象属性的操作

当监听数据如下对象属性 info.username

data:{
    info:{
       username:"popo"
        }
}    

此时，利用方法定义的侦听器就失效了，页面上info.username的改变触发不了侦听器，

解决办法:

<1>利用deep深度监听

watch:{
     info:{
        handler(){
    console.log("触发了")
    },
    deep:true
}


}        

 <2>直接监听属性

watch:{
     "info.username":{
        handler(){
    console.log("触发了")
    }
}


}