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

    1.  watch:{
    2.      name:{
    3.        handler(newName,oldName){
    4.            //执行代码
    5.        },
    6.        immediate:true //true就表示会立即执行
    7.      }
    8.  }

    二、deep属性
    如果是监听的是对象类型，当手动修改对象的某个属性时，发现是无效的。
    这时候就需要deep属性。

    1. data:{
    2.     obj:{
    3.       a:1
    4.     }
    5. },
    6. watch:{
    7.     obj:{
    8.       handler(newName,oldName){
    9.           //执行代码
    10.       },
    11.       deep:true //为true，表示深度监听，这时候就能监测到a值变化
    12.     }
    13. }


    deep为true，就可以监测到对象中每个属性的变化。
    它会一层层遍历，给这个对象的所有属性都加上这个监听器。但是这样性能开销会比较大，修改任何一个属性，都会出发这个监听器里的handler.

    三、deep优化
    可以使用字符串形式监听

    1. data:{
    2.     obj:{
    3.       a:1
    4.     }
    5. },
    6. watch:{
    7.     'obj.a':{
    8.       handler(newName,oldName){
    9.           //执行代码
    10.       },
    11.       deep:true //为true，表示深度监听，这时候就能监测到a值变化
    12.     }
    13. }

    这样vue就会一层层解析，知道遇到属性a，然后才给a设置监听函数。

    官方说明
    转载地址