vue中的watch

简单类型、数组

String、Number、Boolean、Array

watch:{
// 方式一：函数体
  message1(newValue,oldValue){console.log('message1值变更')},
// 方式二：对象形式
  message2:{
    handle(newValue,oldValue){console.log("message2值变更")}
    },
// 方式三：函数名
  message3: 'mes3Change' // 函数名
},
methods:{
 mes3Change(newValue,oldValue){console.log('message3变更')}
}

对象的指定属性变更（简单类型）

watch:{
'obj.a':function(){
  console.log('对象obj中的属性a变更')
},
'obj.a':{
  handle(){}
},
'obj.a':'demo'
}

对象

watch:{
obj:{
  handle(newValue,oldValue){
    console.log('对象变更')
    },
   deep:true,// 为了发现对象内部值的变化，检测数组变化时，不需要加
  }
}

不能检测到的情况

1. 对象属性的添加、删除
2. 数组：利用索引直接设备一个数组项
3. 数组：直接修改数组长度

调用多个方法

以数组形式，依次输出1、2、3

watch:{
c: [
      'demo',
      function () {
        console.log('1');
      },
      {
        handler() {
          console.log('3');
        },
      },
    ],
},
methods:{
  demo() {
      console.log('2');
    },
}

watch和computed

watch使用场景： 一个值的变化后（store中的变量）需要执行某个方法；

computed使用场景：一个值的变更依赖于多个值的变化；