vue中watch高级用法（deep和immediate）

一、handler方法和immdiate属性
watch默认绑定，页面首次加载时，是不会执行的。只有值发生改变才会执行。

 watch:{
     name:{
       handler(newName,oldName){
           //执行代码
       },

  immediate默认是false 改为true让他先去执行里面的handler方法，如果不写将不显示监听的初始值

       immediate:true //true就表示会立即执行
     }
 }

二、deep属性

如果是监听的是对象类型，当手动修改对象的某个属性时，发现是无效的。

data:{
    obj:{ name: '李四' }
},
watch:{
    obj:{
      handler(newName,oldName){
          //执行代码
      },
      deep:true //为true，表示深度监听，这时候就能监测到a值变化
    }
}

三、deep优化

可以使用字符串形式监听

data:{
  obj:{ name: '李四' }
},
watch:{
    'obj.name':{
      handler(newName,oldName){
          //执行代码
      },
      deep:true //为true，表示深度监听，这时候就能监测到a值变化
    }
}