參考：
1.基礎版監聽：監聽 ‘‘單個值’’
場景如下：輸入框輸入你的年齡，如果年齡在0-15歲提示信息：你還是個小孩，如果年齡在 15-25歲，提示信息：你已經是個少年，如果年齡在25歲以上，提示信息：你已經長大了。根據需求配合監聽屬性我們得到下面的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
年齡：<input type="number" v-model="age"><br>
提示信息：<span>{{infoMsg}}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
age: 0,
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>
</body>
</html>
這裏需要特別說明一下的是：堅挺屬性方法中的兩個參數分別代表的含義：第一個val是當面正在監聽的屬性的值，oldval是屬性改變之前的值，由於這是形參的原因，參數的名字可以自己定義，但是但是參數所代表的含義是不會變化的。
2.進階版監聽：監聽對象
由於我們監聽的是對象info中的屬性age值的變化，所以我們需要使用到的是深度監聽，具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app4">
年齡：<input type="number" v-model="info4.age4"><br>
提示信息：<span>{{infoMsg4}}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app4',
data: {
info4: {
age4: ""
},
infoMsg4: ""
},
watch: {
info4: {
handler: function (val, oldval) {
var that = this;
if (val.age4 > 0 && val.age4 < 15) {
that.infoMsg4 = "你還是個小孩";
} else if (val.age4 > 15 && val.age4 < 25) {
that.infoMsg4 = "你已經是個少年";
} else {
that.infoMsg4 = "你已經長大了";
}
},
deep: true
}
}
})
</script>
</body>
</html>
在這裏需要注意的有兩點：
-
1，這裏的function不能使用箭頭函數替代，如果使用箭頭函數的話，this的指向會是全局。
-
2，你會注意到這裏多加入一個屬性是deep，它的含義表示是否開啓深度監聽，如果開啓值爲true，反之爲false。
3.最高級監聽：監聽對象中的某個屬性
針對第二個案例不知道你有沒有發現一個問題：我們監聽的是一個對象裏面某個屬性的變化，
但是如果當這個對象裏面有很多個值的時候，雖然也可以使用第二種方法進行監聽，
但是這將會是對資源的一種極大的浪費，身爲一個嚴謹的程序員（微笑臉），絕對不能允許這樣的事情發生，
所以我們可以結合computed（計算屬性）對上面的代碼進行優化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app5">
年齡：<input type="number" v-model="info5.age5"><br>
提示信息：<span>{{infoMsg5}}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app5',
data: {
info5: {
age5: "",
name5: "",
hobit5: ""
},
infoMsg5: ""
},
computed: {
ageval: function () {
return this.info5.age5;
}
},
watch: {
ageval: {
handler: function (val, oldval) {
var that = this;
if (val > 0 && val < 15) {
that.infoMsg5 = "你還是個小孩";
} else if (val > 15 && val < 25) {
that.infoMsg5 = "你已經是個少年";
} else {
that.infoMsg5 = "你已經長大了";
}
},
deep: true
}
}
})
</script>
</body>
</html>
通過上面的我們看出，這次我們監聽的是計算屬性ageval，而計算屬性返回的則是info對象中age的值，與第二次的代碼進行比較我們可以發現兩次代碼中監聽的一個是對象info，一個是info對象中age的值，性能大大增強，這就是我們期待的結果了。