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
         },
     }
}

immediate 屬性,立馬進行監聽

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