我們在工作中常常需要監聽某一個屬性值的變化，這個時候我們就需要用到了監聽屬性watch，在這里我總結watch屬性的三種場景使用希望對你有所幫助：

1.基礎版監聽：

場景如下：輸入框輸入你的年齡，如果年齡在0-15歲提示信息：你還是個小孩，如果年齡在 15-25歲，提示信息：你已經是個少年，如果年齡在25歲以上，提示信息：你已經長大了。根據需求配合監聽屬性我們得到下面的代碼：

<template> <div id="app">  年齡：<input type="number" v-model="age"><br>  提示信息：<span>{{infoMsg}}</span> </div></template><script>export default { data() {  return {   age: "",   infoMsg:""  } }, watch:{  age:function(val,oldval){   if(val>0 && val<15){    this.infoMsg="你還是個小孩"   }else if(val>15 && val<25){    this.infoMsg="你已經是個少年"   }else{    this.infoMsg="你已經長大了"   }  } }}</script>

這里需要特別說明一下的是：堅挺屬性方法中的兩個參數分別代表的含義：第一個val是當面正在監聽的屬性的值，oldval是屬性改變之前的值，由于這是形參的原因，參數的名字可以自己定義，但是但是參數所代表的含義是不會變化的。

2.進階版監聽：

下面我們改變一下需求：基礎規則不變，但是因為后臺數據庫的更改（畫個圈圈咀咒他）我們需要提交一個這樣的數據結構

 data() {  return {   info: {    age: ""   },   infoMsg: ""  }; },

由于我們監聽的是對象info中的屬性age值的變化，所以我們需要使用到的是深度監聽，具體代碼如下：

<template> <div id="app">  年齡：<input type="number" v-model="info.age"><br>  提示信息：<span>{{infoMsg}}</span> </div></template><script>export default { data() {  return {   info: {    age: ""   },   infoMsg: ""  }; }, watch: {  info: {   handler: function(val, oldval) {    var that = this;    if (val.age > 0 && val.age < 15) {     that.infoMsg = "你還是個小孩";    } else if (val.age > 15 && val.age < 25) {     that.infoMsg = "你已經是個少年";    } else {     that.infoMsg = "你已經長大了";    }   },   deep: true  } }};</script>

在這里需要注意的有兩點：1，這里的function不能使用箭頭函數替代，如果使用箭頭函數的話，this的指向會是全局。2，你會注意到這里多加入一個屬性是deep，它的含義表示是否開啟深度監聽，如果開啟值為true，反之為false。

3.最高級監聽：

針對第二個案例不知道你有沒有發現一個問題：我們監聽的是一個對象里面某個屬性的變化，但是如果當這個對象里面有很多個值的時候，雖然也可以使用第二種方法進行監聽，但是這將會是對資源的一種極大的浪費，身為一個嚴謹的程序員（微笑臉），絕對不能允許這樣的事情發生，所以我們可以結合computed（計算屬性）對上面的代碼進行優化：