vue watch监听属性的使用

vue watch属性的使用
vue实例中提供了一个watch属性，用于监听vue实例中的属性的变化。
watch对应了一个对象，键是观察的属性，值是对应的回调函数。
基本使用

  var vm = new Vue({
      el: '#app',
      data: {
        money: 100,
      }
      watch: {
        //监听属性中的属性名 就是 我们要监听data中的属性的属性名。
        //第一个参数：当前值
        //第二个参数：上一次的值
        money: function(newValue, oldValue) {
			console.log(newValue, oldValue)
        }
      }
    });

表单校验效果

// watch: 监视数据的变化
watch: {
    // 监视msg，只要msg属性的值发生改变，function就会执行
    // value: 当前值  oldValue:上一次的值
    msg: function(value) {
        if (value.length >=3 && value.length <= 6) {
            this.tips = '正确'
        } else {
            this.tips = '密码格式不正确'
        }
    }
}

监视对象
监视对象的时候，需要加上deep: true
为了发现对象内部值的变化，可以在选项参数中指定 deep: true
如果是一个对象，无法监听到对象内部值的变化

 var vm = new Vue({
      el: '#app',
      data: {
        girlFriend: {
          money: 100,
          love: '你'
        }
      }
      watch: {
        girlFriend: function(newValue, oldValue) {
          console.log(newValue, oldValue);
        }
      }
    });

需要加上deep

data: {
    girlFriend: {
        money: 100,
        love: '你'
    }
},
watch: {
    girlFriend: {
        deep: true,
        handler: function(newValue, oldValue) {
            //注意：如果监听的是对象，新值与旧值都是相同的，因为指向了同一个对象。
            //https://cn.vuejs.org/v2/api/#vm-watch
            console.log(newValue, oldValue);
        }
    }
}

监视对象里面的某一个属性

watch: {
     'queryData.name': {
         handler: function() {
            //do something
         },
     }
}
//简写
 watch: {
    'demo.part'(newValue, old) {
      console.log(newValue, old)
    }
  },

immediate 属性,立马进行监听

watch: {
    user: {
        deep: true,
        immediate:true,
        handler: function(newValue, oldValue) {
          console.log(newValue, oldValue);
        }
    }
}