Vue watch监听 date中的变量 与 数组或者对象的数据变化

Posted 2020-12-11 xintao

直接看下面代码：
　　1.红色的的为一个对象，watch监听时。需要借助 computed 属性，否则watch监听打印出来的新旧值看不出。（注：方法可以随便写，但是 computed 中 与 watch的名字要一致，且computed中必须return返回值。）
   2.蓝色的的为一个普通的变量，watch监听获取它的新旧值时，直接在watch中书写即可。（注：名字必须为 要监听的 变量名字）


data(){
     return{
         Form:{aaa: ‘‘,bbb:‘‘},
         value: ‘‘,
     }
}

computed: {
            NewForm() {
                return JSON.parse(JSON.stringify(this.Form));
            },
 },
watch: {
          NewForm: { 
                handler(newVal, oldVal) {
                      console.log(‘旧值：‘,oldVal);
                      console.log(‘新值：‘,newVal);
               },
               deep: true,  //深度监听(可监听到对象、数组的变化)
          },
           value(newVal,oldVal) {
              console.log(‘旧值：‘,oldVal);
              console.log(‘新值：‘,newVal);
           }         
}