vue的watch场景

这里主要列举一下，监听的是对象的各种情况

data() {
   return {
      test:{id:'id1', name:'name1'}
   };
},

情况一：监听对象

 watch: {
    test: {
      handler(value) {
        console.log('test-value', value);
      },
      deep: false
    }
 }

情况二：监听对象的某个属性

 watch: {
    'test.name': {
      handler(value) {
        console.log('test-value', value);
      }
    }
 }

情况三：深度监听对象

 watch: {
    test: {
      handler(value) {
        console.log('test-value', value);
      },
      deep: true
    }
 }

分析各种情况

this.test.name = 'name1'; //修改属性name的值，值和原来的值一样
this.test.name = 'name2'; //修改属性name的值，值和原来的值不一样
this.test = {id:'id1', name:'name1'};//修改对象的值，值和原来的值一样
this.test = {id:'id1', name:'name2'};//修改对象的值，id值和原来的值一样，name值和原来的值不一样
this.test = {id:'id2', name:'name2'};//修改对象的值，id值和原来的值不一样，name值和原来的值不一样
情况1：    
false
false
true
true
true
情况2：
false
true
false
true
true
情况3：
false
true
true
true
true