一、什麼是偵聽器？
偵聽器是用來檢測數據變化從而來添加執行自己自定義邏輯的代碼（數據一旦發生變化就通知偵聽器所綁定方法 ）。這一點和計算屬性很相似,然而計算屬性一般作用於簡單的一些小邏輯代碼,如果邏輯比較複雜可以使用偵聽器。
二、偵聽器的應用場景
- 一般用於異步或者開銷較大的操作（如 ajax，計時器等一些耗時操作）
三、偵聽器的用法
<div id="app">
<div>
<span>名：</span>
<span>
<input type="text" v-model='firstName'>
</span>
</div>
<div>
<span>姓：</span>
<span>
<input type="text" v-model='lastName'>
</span>
</div>
<div>{{fullName}}</div>
</div>
<script type="text/javascript">
/*
偵聽器
*/
var vm = new Vue({
el: '#app',
data: {
firstName: 'Jim',
lastName: 'Green',
// fullName: 'Jim Green'
},
//watch 屬性 定義 和 data 已經 methods 平級
watch: {
// 注意： 這裏firstName 對應着data 中的 firstName
// 當 firstName 值 改變的時候 會自動觸發 watch
firstName: function(val) {
this.fullName = val + ' ' + this.lastName;
},
// 注意： 這裏 lastName 對應着data 中的 lastName
lastName: function(val) {
this.fullName = this.firstName + ' ' + val;
}
}
});
</script>
四、小案例（驗證用戶名是否可用）
需求：輸入框中輸入姓名，失去焦點時驗證是否存在，如果已
經存在，提示從新輸入，如果不存在，提示可以使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<span>用戶名：</span>
<span>
<input type="text" v-model.lazy='uname'>
</span>
<span>{{tip}}</span>
</div>
</div>
<script type="text/javascript" src="./lib/vue.js"></script>
<script type="text/javascript">
/*
偵聽器
1、採用偵聽器監聽用戶名的變化
2、調用後臺接口進行驗證
3、根據驗證的結果調整提示信息
*/
var vm = new Vue({
el: '#app',
data: {
uname: '',
tip: ''
},
methods: {
checkName: function(uname) {
// 調用接口，但是可以使用定時任務的方式模擬接口調用
var that = this;
setTimeout(function(){
// 模擬接口調用
if(uname == 'admin') {
that.tip = '用戶名已經存在，請更換一個';
}else{
that.tip = '用戶名可以使用';
}
}, 2000);
}
},
watch: {
uname: function(val){
// 調用後臺接口驗證用戶名的合法性
this.checkName(val);
// 修改提示信息
this.tip = '正在驗證...';
}
}
});
</script>
</body>
</html>
五、注意事項
- 偵聽器裏面的參數
val爲當前當前數據變化後的最新值。 - 偵聽器裏的屬性名需要與
data數據中的名字一致。 - watch 中的屬性 一定是data 中 已經存在的數據。
- 偵聽器性能方面比不上計算屬性。
- 當需要監聽一個對象的改變時，普通的watch方法無法監聽到對象內部屬性的改變，只有data中的數據才能夠監聽到變化，此時就需要deep屬性對對象進行深度監聽
如果您也正在學習前端的路上，記得關注該博主，學習更多關於前端的知識~
