watch深度监听immediate，handler，deep的使用

1.immediate与handler
watch的特点是当被监听变量变化时才是执行函数，而在初始化（只有变化才会执行）的时候并不会执行，使用handler与immediate的作用是：



当immediate为false时，与之前的效果相同：


2.deep属性：

<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log('obj.a changed');
      },
      immediate: true
    }
  } 
})

当通过input修改obj.a时，watch监听不到obj属性的变化，所以不会打印 console.log(‘obj.a changed’)
但是在赋值时可以监听到：

mounted: {
  this.obj = {
    a: '456'
  }
}

此时使用

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
} 

或者单独监听‘obj.a’属性

3.watch还可以监听路由！！！！！