watch（偵聽/監聽器）
可以對頁面中已經定義好的變量進行監聽，一旦變量值發生了改變，那麼就可以執行一定操作。
普通監聽
文法格式一：
new Vue({
el
data
methods
watch:{
變量名(newVal[,oldVal]){
業務邏輯代碼...
}
}
})
文法格式二：
new Vue({
el
data
watch:{
要監聽的變量名:{
handler([newVal,oldVal]){
業務邏輯...
}
}
}
}) 深度監聽
new Vue({
el
data
watch:{
要監聽的變量名:{
handler([newVal,oldVal]){
業務邏輯...
},
deep:true;//顯示的進行深度監聽
immediate: true;//提前執行一下 一般不設定 預設值false
}
}
}) demo案例
<body>
<div id="app">
<p>普通監聽</p>
<input type="text" v-model="msg">
<p v-show="newVal!=''">最新資料：{{ newVal }} -- 舊資料：{{ oldVla }}</p>
<p>深度監聽</p>
<input type="text" v-model="userinfo.name">
<p>{{ userinfo.name }}</p>
<div v-for="user of users">
姓名：<input type="text" v-model="user.name"><br>
年齡：<input type="text" v-model="user.age"><br>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{//資料
msg:'',
newVal:'',
oldVla:'',
userinfo:{
name:''
},
users:[
{
name:'小明',
age:18
},
{
name:'小芳',
age:19
}
]
},
methods:{//自定義方法
},
watch:{//偵聽
// 普通監聽
msg(newVal,oldVla){
this.newVal = newVal;
this.oldVla = oldVla;
console.log("資料發送了變化:"+newVal);
},
//深監聽
userinfo:{
handler(newVal){
console.log('使用者資訊發送改變:'+newVal.name);
},
deep:true //是否深度監聽 預設false
},
users:{
handler(newVla){
console.log('使用者資訊發送改變');
},
deep:false
}
}
})
</script>
</body> ![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)