Vue监听器(watch)

所有的侦听器，都应该被定义到    watch  节点下

语法：

 <div id="app">
    <input type="text" name="" id="" v-model="username">
    <input type="text" name="" id="" v-model="info.username">
  </div>
<script>
   var vm=new Vue({
    el:"#app",
    data:{
    username:"admin",
    //用户信息的对象
/*
     info:{
        username:"admin"
     }   
*/
    },
    watch:{
     //侦听器本质上是一个函数，要监听哪个数据的变化，就把数据作为方法名即可
     //新值在前,旧值在后
     username(newStr,OldStr){
        console.log(newStr);
        console.log(oldStr);
       }
    },
//对象格式侦听器
/*
   watch:{
     username:{
      //侦听器的处理函数
       handler(newStr,oldStr){
        console.log(newStr,oldStr);
       },
       //immediate  选项的默认值是false
       //immediate  的作用是：控制侦听器是否自动触发一次
       immediate:true
     }
   }
*/
//深度侦听
  /* 
    watch:{
/*   info (newval) {
          console.log(newval);
        }
           */
   info:{
   handler(newval){
   console.log(newval)
   },
  //开启深度监听，只要对象中任何一个属性变化了，都会触发对象的侦听器
   deep:true
   }*/
//如果想要侦听的是对象的子属性的变化，则必须包裹一层单引号
  'info.username'(newval){
    console.log(newval);
   }
   })
}
</script>

侦听器的格式：

1.  方法格式的侦听器

     //缺点：无法在刚进入页面的时候，自动触发

    // 缺点：如果侦听器是一个对象，如果对象的属性发生了变化，不会触发侦听器

2.对象格式的侦听器

    //好处：可以通过  immediate  选项，让侦听器自动触发

    //好处:可以通过  deep 选项，让侦听器深度监听对象中每个属性的变化